JavaScript 实现输入框内容限制的常用正则表达式与事件方案

作者:窗边听雨

时间:2026-10-27

浏览:654

本文汇总了JavaScript中限制输入框内容的多种常用方案,涵盖纯数字、含小数点数字、字母、汉字及混合字符的过滤逻辑。通过onkeyup、onkeypress、onblur及onafterpaste等事件结合正则表达式,实现禁止特殊字符、限制小数位数及防止非法粘贴等功能,提供可直接复制的HTML input代码片段。

文章目录

JS输入框内容限制方案汇总

第一种情况:文本框仅允许输入数字代码,禁止输入小数点。


仅允许纯数字输入

具体实现代码如下:

 
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

第二种情况:文本框允许输入数字,同时支持输入小数点。


允许数字与小数点输入

具体实现代码如下:

 
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

第三种情况:实现数字与小数点的另一种输入限制方法。


数字与小数点的高级限制

具体实现代码如下:

 
<input type=text tvalue="" ovalue="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.ovalue=this.value}">

第四种情况:文本框仅允许输入字母和汉字,禁止数字。


仅允许字母与汉字输入

具体实现代码如下:

 
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

第五种情况:文本框仅允许输入英文字母和数字,禁止输入中文。


仅允许英文字母与数字

具体实现代码如下:

 
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

第六种情况:文本框仅允许输入数字和英文(示例中特别标注了chun)。


数字与特定英文组合限制

具体实现代码如下:

 
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

第七种情况:限制小数点后最多两位,允许数字和中文,禁止字母和运算符号。


限制小数位数及符号输入

具体实现代码如下:

 
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

第八种情况:限制小数点后最多两位,允许数字、字母、中文及运算符号。


支持运算符号的多字符限制

具体实现代码如下:

 
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
其他常见输入限制场景// 补充示例:仅允许输入汉字
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
// 补充示例:仅允许输入数字
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
// 补充示例:仅允许输入英文和数字
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
// 补充示例:控制输入框仅允许文字或数字,禁止特殊字符
// 此处禁止输入 !@#$%^&* 等特殊符号<br>
<textarea rows=2 cols=20 name=comments onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;">
// 补充示例:仅禁止空格输入
onkeyup="value=value.replace(/\s/g,'')"
// 补充示例:仅允许输入中文和英文
onkeyup="value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,''))"

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章