【js】限制只能输入数字

最新推荐文章于 2024-07-08 17:42:28 发布

向着光芒的女孩

最新推荐文章于 2024-07-08 17:42:28 发布

阅读量990

点赞数

分类专栏： javascript 文章标签： javascript 限制非数字输入

本文链接：https://blog.csdn.net/ann295258232/article/details/53287414

版权

javascript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

《超实用的Javascript代码段》介绍了3种方法限制只能输入数字的方法：

方法一：用html5中input的type=“number"来实现
方法二：用html5中input的pattern=[0-9]来实现
方法三：用javascript的.replace(/\D/g,”")和自定义的clearNonumber()函数共同实现;

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>只能输入数字</title>
</head>
<body>
<form>
    <h3>方法一用input的type属性</h3>
    <input type="number" value="html5只能输入数字"  />
    <h3>方法二 用input的pattern属性</h3>
    <input type="text" pattern=[0-9]  />
    <h3>方法三 用javascript</h3>
    <input type="text" name="number" value="只能输入数字" id="banNumber" />
    <input type="submit" value="提交"/>
</form>

<script>
    var banNumber = document.getElementById("banNumber"),
            clearNonumber = function(tThis){
                var _v = tThis.value;
                tThis.value = _v.replace(/\D/g,"");
            };
    banNumber.onfocus = function(){
        clearNonumber(this);
    }
    banNumber.onkeyup = function(){
        clearNonumber(this);
    }
    banNumber.onblur = function(){
        clearNonumber(this);
    }
</script>

</body>
</html>

效果图如下：

这里写图片描述