HTML中控制input文本框输入内容

谁借莪１个温暖的怀抱￠ 2022-10-28 13:24 9阅读 0赞

### 1.控制input只能输入正整数 ###

<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

### 2.只能输入正整数 ###

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

### 3.只能输入数字（可输入小数点） ###

<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">

### 4.只能输入数字（可输入小数点） ###

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

封装成单独的函数：

function keyPress(ob) { 
     if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
    }
    
    function keyUp(ob) { 
     if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
            }
    
    function onBlur(ob) { 
    if(!ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))ob.value=ob.o_value;else{ if(ob.value.match(/^\.\d+$/))ob.value=0+ob.value;if(ob.value.match(/^\.$/))ob.value=0;ob.o_value=ob.value};
    }

### 5.只能输入字母和汉字及其他符号，不能输入数字 ###

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

### 6.只能输入英文字母和数字（包含小数点） ###

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

### 7.只能输入数字和字母 ###

<input onKeyUp="value=value.replace(/[\W]/g,'')">

### 8.小数点后最多只能有两位小数（数字、中文均可输入），不能输入字母和运算符号 ###

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

### 9.小数点后只能有最多两位小数（数字、字母、中文均可输入），可以输入运算符号 ###

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

--------------------

**参考文章：**

*  [https://www.cnblogs.com/TigerZhang-home/p/8656345.html][https_www.cnblogs.com_TigerZhang-home_p_8656345.html]
 *  [https://www.cnblogs.com/michaelcnblogs/p/12401992.html][https_www.cnblogs.com_michaelcnblogs_p_12401992.html]
 *  [https://www.cnblogs.com/harry-xiaojun/p/11270940.html][https_www.cnblogs.com_harry-xiaojun_p_11270940.html]
 *  [https://www.cnblogs.com/hellosen/p/12978421.html][https_www.cnblogs.com_hellosen_p_12978421.html]

[https_www.cnblogs.com_TigerZhang-home_p_8656345.html]: https://www.cnblogs.com/TigerZhang-home/p/8656345.html
[https_www.cnblogs.com_michaelcnblogs_p_12401992.html]: https://www.cnblogs.com/michaelcnblogs/p/12401992.html
[https_www.cnblogs.com_harry-xiaojun_p_11270940.html]: https://www.cnblogs.com/harry-xiaojun/p/11270940.html
[https_www.cnblogs.com_hellosen_p_12978421.html]: https://www.cnblogs.com/hellosen/p/12978421.html

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关控制文本框的输入类容

把输入框中输入的字符串含有中文逗号改成英文逗号举例： <input type="text" id="keywords" style="width: 650px;">

曾经终败给现在/ 2024年02月18日 20:00/ 0 赞/ 49 阅读

相关 vue实时监听input输入框中输入内容

1：根据官方文档change 输入框内容变化时的回调 <a-input-search style="width: 15%;height:3%;margin-top

绝地灬酷狼/ 2023年02月17日 03:47/ 0 赞/ 19 阅读

相关 HTML中控制input文本框输入内容

1.控制input只能输入正整数 <input onkeyup="if(this.value.length==1){this.value=this.value.r

谁借莪１个温暖的怀抱￠/ 2022年10月28日 13:24/ 0 赞/ 10 阅读

相关【JavaScript】——限制文本框输入内容

这几天，项目开始走测试流程了，组长让我们都把做过的功能的细节方面，完善一下。限制文本框输入长度啊，弹出框样式啊。然后，就开始了漫长补洞的时间。项

女爷i/ 2022年07月19日 11:53/ 0 赞/ 289 阅读

相关【html】input限制输入

原博客地址：[https://www.cnblogs.com/phpfensi/p/7298617.html][https_www.cnblogs.com_phpfensi_p

柔光的暖阳◎/ 2022年06月02日 11:55/ 0 赞/ 237 阅读

相关控制input框输入数字

1.只能输入正整数 <input type="text" οnkeyup="if(this.value.length==1){this.value=this.val

男娘i/ 2022年05月25日 07:21/ 0 赞/ 326 阅读

相关禁止input文本框输入实现属性

readonly、disabled、autocomplete 1.readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选

心已赠人/ 2022年05月22日 06:12/ 0 赞/ 192 阅读

相关控制HTML Input只能输入数字和小数点

本文介绍两种使用[javascript][]控制在<input type="text" name="name" value="0" />中只允许输入数字和小数点的方案。希望

雨点打透心脏的1/2处/ 2022年02月23日 06:16/ 0 赞/ 441 阅读

相关 html文本框输入效果合集

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1. \[代码\]html 文本输入框效果大汇集跳至

r囧r小猫/ 2022年01月12日 16:53/ 0 赞/ 531 阅读

相关使input文本框随输入内容变化长度的方法

[转发自：https://blog.csdn.net/superit401/article/details/72473318][https_blog.csdn.net_sup

悠悠/ 2021年09月18日 13:36/ 0 赞/ 808 阅读