限制文本框中只能输入数字

最新推荐文章于 2023-11-10 09:40:10 发布

qq619771478

最新推荐文章于 2023-11-10 09:40:10 发布

阅读量754

点赞数

分类专栏：编程语言文章标签：浏览器文本框输入数字

本文链接：https://blog.csdn.net/qq619771478/article/details/49684113

版权

编程语言专栏收录该内容

45 篇文章 0 订阅

订阅专栏

由于我们很多时候需要这一功能——————文本框只能输入指定位数的数字，或者小数等，不能输入字母或汉字。

接下来我来简单地实现这一功能吧，而且还是兼容浏览器的。

闲话不多说，直接贴上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
function getEvent() {
    if (document.all) {
        return window.event; //for ie
    }
    func = getEvent.caller;
    while (func != null) {
        var arg0 = func.arguments[0];
        if (arg0) {
            if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                return arg0;
            }
        }
        func = func.caller;
    }
    return null;
}
function doit(e){
    var ev = getEvent();
	if(e.value.length>1&&ev.keyCode!=8){ return false;}
    else if(ev.keyCode==8 || (ev.keyCode >= 48 && ev.keyCode <= 57)) {return true;}
	else { return false;}
}
</script>
 </head>

 <body>
  <input type="text" id="txt" οnkeydοwn="return doit(this)">
 </body>
</html>

以上的方法，我实现了文本框只能输入两位数字的操作，而且还支持Backspace回删功能。而且兼容各种浏览器。

有需要的朋友可以参考我的代码，实现功能，此代码经过简单的判断修改就能实现：

1.动态限制各种输入内容

2.动态限制输入内容的位数

有问题的朋友可以留言，会尽快回复~