input 输入框过滤输入文本

本文详细介绍了如何使用JavaScript控制文本框的输入类型,包括仅限数字、字母、中文、特殊字符等,提供了实用的代码示例,适用于网页表单的数据验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

特殊字符:

onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5\w]/g,'')"

只能输入数字:

onkeyup="value=value.replace(/[^\d]/g,'') " 

只能输入数字和字母:

onkeyup="value=value.replace(/[\W]/g,'') " 


 JS 控制文本框只能输入数字
input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')"

JS 控制文本框只能输入数字、小数点
input onkeyup="value=value.replace(/[^\0-9\.]/g,'')" onpaste="value=value.replace(/[^\0-9\.]/g,'')" oncontextmenu = "value=value.replace(/[^\0-9\.]/g,'')">

JS 控制文本框只能输入英文
input onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z]/g,'')">

JS 控制文本框只能输入英文、数字
input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">

JS 控制文本框只能输入中文
input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

JS 控制文本框只能输入中文、英文、数字
input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">

JS 控制文本框只能输入中文、英文、数字、空格
input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">

JS 控制文本框只能输入中文、英文、数字、小数点
input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">


总而言之:先在input标签里输入onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的X换成你想输入的代码就可以了,中文u4E00-u9FA5,数字0-9,英文a-z\A-Z,其它符号@、点或其它符号。也可以多个,用\隔开就行了。
例如:中英文 + 数字 + @符号 + 点符号   \a-\z\A-\Z0-9\u4E00-\u9FA5\@\.

例如:中英文 + 数字 +常用的标点符号

 onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\,\-\——\=\;\@\!\!\+\$]/g,'')"


若想在文本框里不能右键弹出菜单和不能粘贴进复制的信息的话
就要在input里输入 onpaste="return false" oncontextmenu="return false;"
 

### 禁止 ElementUI 中 `el-input` 输入框输入下划线 为了实现在 ElementUI 的 `el-input` 组件中禁止用户输入下划线,可以通过监听用户的输入事件(如 `@input` 或者原生的 `onkeyup`),并对输入的内容进行过滤处理。以下是具体的实现方式: #### 方法一:通过正则表达式过滤 可以在 `el-input` 上绑定一个自定义函数来实时监控输入内容,并移除不符合条件的部分。 ```vue <template> <div> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="测试字段" prop="testField"> <el-input v-model="form.testField" @input="filterInput"></el-input> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { testField: '' }, rules: {} }; }, methods: { filterInput(value) { this.form.testField = value.replace(/_/g, ''); // 使用正则去除下划线[^1] } } }; </script> ``` 此方法利用了 JavaScript 正则表达式的替换功能,在每次用户输入时自动检测是否有非法字符(此处为 `_` 下划线),如果有,则将其删除。 --- #### 方法二:结合 Vue 自定义指令 如果项目中有多个地方需要用到类似的逻辑,可以考虑封装成全局指令以便重用。 ```javascript // 定义全局指令 Vue.directive('no-underline', { bind(el) { el.addEventListener('input', function () { const newValue = el.value.replace(/_/g, ''); if (newValue !== el.value) { el.value = newValue; const event = new Event('input'); el.dispatchEvent(event); // 手动触发 input 事件以更新双向绑定[^2] } }); } }); ``` 在模板中使用该指令如下所示: ```vue <el-input v-no-underline v-model="form.testField"></el-input> ``` 这种方式更加灵活且易于维护,尤其适合大规模应用中的统一管理需求。 --- #### 方法三:样式调整(仅隐藏视觉效果) 需要注意的是,“禁用下划线”的含义可能被误解为仅仅是外观上的改变而非实际行为限制。如果是希望单纯去掉光标处显示的下划线效果,可通过 CSS 调整 `.el-input__inner` 类的相关属性完成。 ```css .el-input__inner { text-decoration: none !important; /* 移除任何文本装饰 */ } ``` 不过这种方法并不会阻止用户实际键入下划线字符,因此需谨慎选用。 --- ### 总结 以上三种方案分别适用于不同的场景需求——当目标是严格控制数据有效性时推荐采用前两种技术手段;而后者更适合于追求界面美观度而不涉及深层交互的情形。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值