html 中 textarea,input 文本输入框限制输入内容

最新推荐文章于 2025-05-10 22:57:16 发布

安小兴先生

最新推荐文章于 2025-05-10 22:57:16 发布

阅读量2.2k

点赞数 3

分类专栏：前端html 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/junxing2018_wu/article/details/125045182

版权

前端html 专栏收录该内容

1 篇文章

订阅专栏

这篇博客整理了在HTML中对textarea和input元素进行输入内容限制的方法，包括只能输入数字、数字和小数点、英文、中文等不同组合，以及对小数点后位数的限制，同时还涵盖了允许输入中文、数字、英文及特定符号的情况。这些限制可以直接作为属性嵌入标签，简化表单验证过程。

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

经常碰到需要控制表单元素输入的类型，然后每次总是百度，然后复制粘贴，特别浪费时间。
这里收集好方便直接使用。提供的方法非常简单使用直接嵌套在标签上使用，无需单独写js方法调用实现，

只能输入数字(小数点也不能输入)

<input type="text" name="input_text" onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu="value=value.replace(/[^0-9]/g,'')">

<input type="text" name="input_text" onkeyup="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')">

只能输入数字、小数点

<input type="text" name="input_text" onkeyup="value=value.replace(/[^\0-9.]/g,'')" onpaste="value=value.replace(/[^\0-9.]/g,'')" oncontextmenu="value=value.replace(/[^\0-9.]/g,'')">

<input type="text" name="input_text" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">

<input type="text" name="input_text" onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

<input type="text" t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=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.o_value=this.value}">

只能输入英文

<input type="text" name="input_text" 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,'')">

只能输入英文、数字

<input type="text" name="input_text" 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,'')">

只能输入中文

<input type="text" name="input_text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

只能输入中文、英文、数字

<input type="text" name="input_text" 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 type="text" name="input_text" 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 type="text" name="input_text" 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(/[\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength="10" name="input_text">

只能输入英文字母和数字,不能输入中文

<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 type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">

输入数字

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

输入英文

<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

输入中文/英文/数字

<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">

只输入数字和字母

<input name="input" maxlength="12" size="15" name="username" id="username" onkeyup="value=value.replace(/[\W]/g,'')">

除了英文的标点符号以外其他的任何字符都可以，包括中文，英文字母，数字，中文标点

<input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">

不能输入特殊字符

<input type="text" name="input_text" onkeyup="value=value.replace(/[^u4e00-u9fa5w]/g,'')" onpaste="value=value.replace(/[^u4e00-u9fa5w]/g,'')" oncontextmenu="value=value.replace(/[^u4e00-u9fa5w]/g,'')">