HTML input text 常用事件

前言

用于记录开发中常用到的,快捷开发

简单实例

<input type="text" name="noSecretKeyJson"  maxlength="200" />

在这里插入图片描述

常用事件

oninput (在用户输入时触发)及案例

案例一:限制只允许输入数字

<input type="text" name="noSecretKeyJson"  maxlength="200" oninput="value=value.replace(/[^\d]/g,'')"/>

案例二:限制输入字体个数

<input type="text" name="coSecretKeyJson" oninput="if(value.length>8)value=value.slice(0,8)"/>

onchange(在用户输入失去光标时触发) 及案例

案例一:限制只允许输入数字和字符

<input type="text" name="coSecretKeyJson" style="float:left;width: 85%;" class="form-control"  onchange='handleInput(event)' />
function handleInput(event) {
     const inputValue = event.target.value;
     const nonChineseRegex = /[^a-zA-Z0-9]/g; // 非中文字符的正则表达式
     const filteredValue = inputValue.replace(nonChineseRegex, ''); // 过滤掉非中文字符
     event.target.value = filteredValue; // 将输入框的值设置为过滤后的值
     console.log(event.target.value)
 }

案例一实现效果
在这里插入图片描述
在这里插入图片描述

总结

后续用到的我会继续写进去,如果有大佬遇到其他常用的,欢迎评论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/42017.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#基础--反射

反射 一、为什么学习反射 因为反射真的是无处不在&#xff0c;ORM、MVC、IOC、AOP、Attribute等等都会使用到反射。反射是程序员的快乐 二、什么是反射 Ilspy&#xff1a;逆向工程&#xff0c;可以吧DLL/Exe文件反编译回来 DLL/EXE 文件下包含Metadata和IL&#xff0c;IL是对…

跨文化合作:如何解决海外网红营销中的文化差异?

随着社交媒体的快速发展&#xff0c;海外网红营销已成为许多品牌和企业获取国际市场的有效方式。然而&#xff0c;由于不同国家和地区存在着独特的文化差异&#xff0c;如语言、价值观、习俗等&#xff0c;这也给品牌进行海外网红营销带来了一系列挑战。本文Nox聚星将和大家探讨…

WPF 自定义控件完成库容表盘显示效果

先看一下显示效果&#xff1a; 需要注意的地方有以下几点&#xff1a; 表盘的刻度分部&#xff0c;长刻度和短刻度显示。在数值80W时&#xff0c;需要更改刻度盘的颜色渐变。在数值80W时&#xff0c;更改库容总数背景的显示&#xff0c;也是颜色渐变。刻度盘控件属性定义&…

JVM中的堆和栈到底存储了什么

JVM数据区 先上一张Java虚拟机运行时数据区中堆、栈以及方法区存储数据的概要图&#xff0c;如下所示&#xff1a; 然后我们来具体解析一下堆和栈 堆 堆是存储时的单位&#xff0c;对于绝大多数应用来说&#xff0c;这块区域是 JVM 所管理的内存中最大的一块。线程共享&#…

JavaScript XHR、Fetch

1 前端数据请求方式 2 Http协议的解析 3 XHR的基本用法 4 XHR的进阶和封装 5 Fetch的使用详解 6 前端文件上传流程 早期的页面都是后端做好&#xff0c;浏览器直接拿到页面展示的&#xff0c;用到的是jsp、asp、php等等的语言。 这个叫做服务器端渲染SSR。 这里后端向前端…

[sqoop]导入数据

一、覆盖导入 例如维度表&#xff0c;每次导入的数据需要覆盖上次导入的数据。 hive-overwrite参数&#xff1a;实现覆盖导入 hive-import参数&#xff1a;表示向hive表导入 hive-table参数&#xff1a;指定目标hive库表 sqoop import \ --connect jdbc:mysql://hadoop1:3…

介绍性能压力测试的重要性

在当今数字化时代&#xff0c;软件和应用程序的性能对于用户体验和业务成功至关重要。为了确保系统在面临高负载和压力时能够正常运行&#xff0c;性能压力测试成为一项不可或缺的活动。本文将介绍性能压力测试的重要性。 性能压力测试是一种通过模拟实际场景中的负荷和用户访问…

前端两种实现轮播图方式

今天研究两种简单实现轮播图功能的方式。 目录 Layui实现轮播图 码云下载 提取静态文件 示例 注意 参数说明 改为轮播图 增加图片资源文件 轮播栏目修改 改为上下切换 切换事件 脚本中绑定改变事件 控制器查看 Swiper实现轮播图 下载swiper 下载到本地 加载sw…

EMC学习笔记(十七)PCB设计中的安规考虑

PCB设计中的安规考虑 1 概述2.安全标识2.1 对安全标示通用准则2.2 电击和能量的危险2.3 PCB上的熔断器2.4 可更换电池 3.爬电距离和电气间隙4.涂覆印制板4.1 PCB板的机械强度4.2 印制电路板的阻燃等级4.3 热循环试验与热老化试验4.4 抗电强度试验4.5 耐划痕试验 5.布线和供电 1…

网络安全(黑客)万字自学笔记

目录 特别声明&#xff1a; 一、前言 二、定义 三、分类 1.白帽黑客&#xff08;White Hat Hacker&#xff09; 2.黑帽黑客&#xff08;Black Hat Hacker&#xff09; 3.灰帽黑客&#xff08;Gray Hat Hacker&#xff09; 四、黑客文化 五、伦理问题 六、黑客的作用 …

shell脚本备份数据库

首先是在本地windows环境下尝试备份数据库 打开mysql的bin目录&#xff0c;然后在地址栏cmd&#xff0c;进入cmd界面&#xff0c;输入mysqldump命令&#xff0c;-u输入用户名&#xff0c;-p输入密码 还有数据库名称&#xff0c;以及后面要保存到的位置 mysqldump -uroot -p tes…

编写测试用例的方法,这个是真的很好用

大家测试过程中经常用的等价类划分、边界值分析、场景法等&#xff0c;并不能覆盖所有的需求&#xff0c;我们之前讲过很少用到的因果图法&#xff0c;下面就来讲另一种不经常用到但又非常重要的测试用例编写方法——测试大纲法。 测试大纲法适用于有多个窗口&#xff0c;每个…

Vue-Router相关理解4

两个新的生命周期钩子 activated和deactivated是路由组件所独有的两个钩子&#xff0c;用于捕获路由组件的激活状态具体使用 activated路由组件被激活时触发 deactivated路由组件失活时触发 src/pages/News.vue <template><ul><li :style"{opacity}&qu…

linux之Ubuntu系列(五)用户管理、查看用户信息 终端命令

创建用户 、删除用户、修改其他用户密码的终端命令都需要通过 sudo 执行 创建用户 设置密码 删除用户 sudo useradd -m -g 组名 新建用户名 添加新用户 -m&#xff1a;自动建立用户 家目录 -g&#xff1a;指定用户所在的组。否则会建立一个和用户同名的组 设置新增用户的密码&…

尝试-InsCode Stable Diffusion 美图活动一期

一、 Stable Diffusion 模型在线使用地址&#xff1a; https://inscode.csdn.net/inscode/Stable-Diffusion 二、模型相关版本和参数配置&#xff1a; 活动地址 三、图片生成提示词与反向提示词&#xff1a; 提示词&#xff1a;realistic portrait painting of a japanese…

vscode remote-ssh配置

使用vscode的插件remote-ssh进行linux的远程控制。 在vscode上安装完remote-ssh插件后&#xff0c;还需要安装openssh-client。 openssh-client安装 先win R打开cmd&#xff0c;输入ssh&#xff0c;查看是否已经安装了。 如果没有安装&#xff0c;用管理员权限打开powershe…

商城-学习整理-基础-环境搭建(二)

目录 一、环境搭建1、安装linux虚拟机1&#xff09;下载&安装 VirtualBox https://www.virtualbox.org/&#xff0c;要开启 CPU 虚拟化2&#xff09;虚拟机的网络设置3&#xff09;虚拟机允许使用账号密码登录4&#xff09;VirtualBox冲突5&#xff09;修改 linux 的 yum 源…

DirectX12(D3D12)基础教程(二十二) ——HDR IBL 等距柱面环境光源加载和解算及 GS 一次性渲染到 CubeMap

前序文章目录 DirectX12&#xff08;D3D12&#xff09;基础教程&#xff08;一&#xff09;——基础教程 DirectX12&#xff08;D3D12&#xff09;基础教程&#xff08;二&#xff09;——理解根签名、初识显存管理和加载纹理、理解资源屏障 DirectX12&#xff08;D3D12&…

传统软件测试过程中的测试分工

最近看了点敏捷测试的东西&#xff0c;看得比较模糊。一方面是因为没有见真实的环境与流程&#xff0c;也许它跟本就没有固定的模式与流程&#xff0c;它就像告诉人们要“勇敢”“努力”。有的人在勇敢的面对生活&#xff0c;有些人在勇敢的挑战自我&#xff0c;有些人在勇敢的…

Java打怪升级路线的相关知识

第一关:JavaSE阶段 1、计算机基础 2、java入门学习 3、java基础语法 4、流程控制和方法 5、数组 6、面向对象编程 7、异常 8、常用类 9、集合框架 10、IO 11、多线程 12、GUI编程 13、网络编程 14、注解与反射 15、JUC编程 16、JVM探究 17、23种设计模式 18、数据结构与算法 1…