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

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

总结

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

猜你喜欢

转载自blog.csdn.net/qq_44697754/article/details/131718229