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)}

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

总结

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题

初始化参数 return {fields: [{"title":"景区","id":0},{"title":"酒店","id":1}],evaluates: [{"title":"好评","id":0},{"title":"中评","id":1…

Linux查看机器内存空间

执行 fdisk命令查看磁盘空间 fdisk -l更多方法参考&#xff1a; Linux检查磁盘空间

Shell脚本——流量探测(自动化运维)

目的 自动 捕获指定IP或端口的流量生成日志&#xff0c;实现流量探测功能 准备 Root用户权限下才能运行tcpdump脚本 优势 Liunx系统自带&#xff0c;无需安装其他组件&#xff0c;捕获准确度高 缺点 不能同时检测多个IP流量&#xff0c;效率低 重点 日志文件 tou…

datatables.editor 2.2 for PHP/JS/NodeJS Crack

使用数据表编辑器在几分钟内创建自定义、完全可编辑的表 编辑器添加了三种编辑模式&#xff0c;以适应任何类型的应用程序 新增功能 编辑 删除 搜索&#xff1a; 名字位置办公室开始日期工资名字位置办公室开始日期工资佐藤爱里会计东京2008-11-28$162&#xff0c;700安吉莉卡拉…

vue hook单元测试

vue3 单元测试&#xff08;hooks测试&#xff09; 普通单元测试 function add(a: number, b: number) {return a b;}expect(add(1, 2)).toEqual(3);vue中的测试 vue的hook中存在vue的生命周期&#xff0c;所以需要hooks在vue中运行模拟整个生命周期 为hook提供组件环境 im…

【数据结构】图解八大排序(下)

文章目录 一、前言二、快速排序1. hoare 版2. 挖坑法3. 前后指针法4. 快排的非递归实现5. 时空复杂度分析 三、归并排序1. 递归实现2. 非递归实现 四、计数排序 一、前言 在上一篇文章中&#xff0c;我们已经学习了五种排序算法&#xff0c;还没看过的小伙伴可以去看一下&…

Android 中app内存回收优化(二):S 版本

版本基于&#xff1a;Android S 0. 前言 Android Q 中新增了framework 端app 内存回收优化方案。当app 的 oom adj 发生特定变化时&#xff0c;framework 端会对应用的内存进行处理。随着版本的演变&#xff0c;这部分优化工作也一直在完善&#xff0c;笔者将针对 Android R 和…

Redis数据结构 — Listpack

目录 listpack 结构 listpack 节点结构 quicklist 虽然通过控制 quicklistNode 结构里的压缩列表的大小或者元素个数&#xff0c;来减少连锁更新带来的性能影响&#xff0c;但是并没有完全解决连锁更新的问题。 于是&#xff0c;Redis 在 5.0 新设计一个数据结构叫 listpack…

(学习笔记)TCP基础知识

什么是TCP? TCP 是面向连接的、可靠的、基于字节流的传输层通信协议。 面向连接&#xff1a;一定是[一对一]才能连接&#xff0c;不能像UDP协议可以一个主机同时向多个主机发送消息&#xff0c;也就是一对多是无法做到的&#xff1b;可靠的&#xff1a;无论网络链路中出现了…

dede ckeditor编辑器让上传图片自动使用绝对地址显示

dedecms ckeditor编辑器让上传图片自动使用绝对地址显示&#xff0c;本教程适合织梦cms v57&#xff0c;其他版本未测试。由于我们网站为了更好更有效的解决seo方案&#xff0c;于是在考虑到发布文章的时候&#xff0c;上传的正文图片&#xff0c;是非绝对路径的&#xff0c;于…

mongodb集群搭建

下载地址&#xff1a; https://www.mongodb.com/try/download/community下载mongodb-linux-x86_64-rhel70-5.0.18 搭建集群 tar -zxvf mongodb-linux-x86_64-rhel70-5.0.18.tgz mkdir -p data/dp cd mongodb-linux-x86_64-rhel70-5.0.18 mkdir -p data/db mkdir log mkdir c…

AIGC之文本内容生成概述(下)——Transformer

在上一篇文章中&#xff0c;我们一口气介绍了LSTM、Word2Vec、GloVe、ELMo等四种模型的技术发展&#xff0c;以及每种模型的优缺点与应用场景&#xff0c;全文超过一万字&#xff0c;显得冗长且繁杂&#xff0c;在下文部分我们将分开介绍Transformer、BERT、GPT1/GPT2/GPT3/Cha…

Java:输入与输出

目录 输入输出args 输入Scanner 输入格式化输出文件输入与输出 输入输出 args 输入 利用main函数中的参数args&#xff0c;当然也可以起别的名字。其他语言也是一样的。输入时空格分隔。 args的作用&#xff1a;在程序启动时可以用来指定外部参数 Scanner 输入 需要import j…

机器学习深度确定性策略梯度(DDPG)笔记

深度确定性策略梯度&#xff08;Deep Deterministic Policy Gradient&#xff0c;DDPG&#xff09;是一种用于解决连续动作空间的强化学习算法。它结合了确定性策略梯度方法和深度神经网络。 DDPG算法的基本思想是通过两个神经网络来近似值函数和策略函数。其中&#xff0c;值…

JDK、JRE、JVM之间的关系是什么?

目录 JVM、JRE、JDK的关系&#xff1f; JDK、JRE、JVM都是什么&#xff1f; JVM JRE JDK JVM、JRE、JDK的关系&#xff1f; 三者包含关系&#xff1a; JDK>JRE>JVM JDK、JRE、JVM都是什么&#xff1f; jdk&#xff1a;是用于java开发的最小环境 包括&#xff1a;ja…

【webpack】webpack初步了解(存档自用)

2023/7/14 09:26:28 webpack工程化构建 2023/7/14 09:26:50 Webpack是一个现代化的前端工程化构建工具&#xff0c;它可以将多个模块打包成一个或多个静态资源文件。使用Webpack&#xff0c;你可以通过配置定义各种模块之间的依赖关系、加载器和插件。 以下是使用Webpack进…

如何助力企业DCMM贯标落地,这里有答案

DCMM作为国家第一个数据管理领域标准&#xff0c;是企业落实数据驱动战略、实现数字化转型的重要抓手。从行业实践来看&#xff0c;国内多个行业开始在全面拥抱DCMM模型&#xff0c;根据模型开展数据管理评估和能力提升工作。 01 什么是DCMM DCMM是国家标准《GB/T36073-2018 数…

Word文档突然无法打开?如何修复损坏文档?

在工作学习中&#xff0c;通常会遇到这种情况&#xff0c;我们正在编辑Word文件&#xff0c;电脑忽然断电关机&#xff0c;或者死机需要重启。当电脑重启以后&#xff0c;辛辛苦苦编辑很久的Word文件却忽然打不开了&#xff01;一直提示文件错误&#xff0c;如何解决Word无法打…

postgresql 内核源码分析 表锁relation lock的使用,session lock会话锁的应用场景,操作表不再困难

​专栏内容&#xff1a; postgresql内核源码分析 手写数据库toadb 并发编程 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 表锁介绍 当表打开&#xff0c;或者操作表时&#xff0c;都需要…

常考的技巧类算法题(一):下一个排列

技巧类算法题是我随口提的一个概念&#xff0c;意思就是这道题有自己独特的思考思路&#xff0c;仅仅知道它所涉及的最基础的知识点&#xff08;如宽泛的双指针&#xff0c;动规或深度优先搜索&#xff09;&#xff0c;然后自行推理解题套路十分困难。因此在此做一个整理&#…