限制HTML的文本输入框只能输入数字的4种方法

最新推荐文章于 2024-06-07 17:42:25 发布

空白_回忆

最新推荐文章于 2024-06-07 17:42:25 发布

阅读量2.5w

点赞数 5

分类专栏： JavaScript 文章标签： html 限制输入文本框只为数字网站

本文链接：https://blog.csdn.net/qq_26291823/article/details/52993803

版权

JavaScript 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

限制HTML的文本输入框只能输入数字的4种方法

ps：本人亲测，阿里云2核4G5M的服务器性价比很高，新用户一块多一天，老用户三块多一天，最高可以买三年，感兴趣的可以戳一下：阿里云折扣服务器

1. keydown 

  通过阻止事件往keypress传播，来禁止非数字字符在文本框显示。 

<html>  
<head>  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
function prevent(e) {  
    e.preventDefault ? e.preventDefault() : e.returnValue = false;  
}  
function digitInput(el, e) {  
    var ee = e || window.event; // FF、Chrome IE下获取事件对象  
    var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码  
    //var txt = $('label').text();  
    //$('label').text(txt + ' ' + c);  
    var val = el.val();  
    if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点  
        (val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空，不允许输入点  
    } else {  
        if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete  
            (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow  
            (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9  
            (c < 96 || c > 105)) // 96~105 - 小键盘的0~9  
            || e.shiftKey) { // Shift键，对应的code为16  
            prevent(e); // 阻止事件传播到keypress  
        }  
    }  
}  
$(function(){  
    $("input[name='text1']").keydown(function(e) {  
        digitInput($(this), e);  
    });  
});  
</script>  
</head>  
<body>  
<input type="text" name="text1" />  
<label></label>  
</body>  
</html>  



（1）限制input只能输入整型的整数或浮点型的小数：
function prevent(e) {  
    e.preventDefault ? e.preventDefault() : e.returnValue = false;  
}  
function digitInput(el, e) {  
    var ee = e || window.event; // FF、Chrome IE下获取事件对象  
    var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码  
    //var txt = $('label').text();  
    //$('label').text(txt + ' ' + c);  
    var val = el.val();  
    if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点  
        (val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空，不允许输入点  
    } else {  
        if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete  
            (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow  
            (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9  
            (c < 96 || c > 105)) // 96~105 - 小键盘的0~9  
            || e.shiftKey) { // Shift键，对应的code为16  
            prevent(e); // 阻止事件传播到keypress  
        }  
    }  
}  
$(function(){  
    $("input[name='text1']").keydown(function(e) {  
        digitInput($(this), e);  
    });  
});

（2）限制input只能输入整型的整数：
function prevent(e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
    function digitInput(e) {
        var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
        if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
                (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
                (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
                (c < 96 || c > 105)) // 96~105 - 小键盘的0~9
                || e.shiftKey) { // Shift键，对应的code为16
            prevent(e); // 阻止事件传播到keypress
        }
    }
    $(function(){
        $("input[name='text1']").keydown(function(e) {
            digitInput(e);
        });
});

（3）限制input只能输入保留小数点后一位的浮点数
function prevent(e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
    function digitInput(el, e) {
        var ee = e || window.event; // FF、Chrome IE下获取事件对象
        var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
        var val = el.val();
        var num = val.split(".");
        if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的'点'
            (val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空，不允许输入点
        } else {
            if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
                    (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
                    (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
                    (c < 96 || c > 105)) // 96~105 - 小键盘的0~9
                    || e.shiftKey) { // Shift键，对应的code为16
                    prevent(e); // 阻止事件传播到keypress
            }
            else
            {
                if (num[1] != undefined)
                {
                    if (num[1].length > 0 && c != 8 && c != 46)
                    {
                        prevent(e); // 阻止事件传播到keypress
                    }
                }
            }
        }
    }
    $(function(){
        $("input[name='inp']").keydown(function(e) {
            digitInput($(this), e);
        });
    });
2. keypress 

  捕获的是单个字符，且捕获的键有限，不适合作为限制输入触发事件。 

3. keyup 
  
  触发时，键对应的字符已经插入到文本框中，这时中断事件是不起作用的。可行方案是替换非数字为空字符，但有明显的替换痕迹： 

Js代码  收藏代码
function digitInput(el, e) {  
    var val = el.val();  
    var val2 = val.replace(/[^\d]/g, '');  
    el.val(val2);  
}  
$(function(){  
    $("input[name='text1']").keyup(function(e) {  
        digitInput($(this), e);  
    });  
});

4、将input type指定为number，但是后面会有增加减少的按钮，如果想去除这个后面的增加减少按钮可以定位一个背景为白色的元素盖住那个按钮就好了，这样即看不到，又无法接受点击事件。

空白_回忆

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
限制HTML的文本输入框只能输入数字的4种方法

限制HTML的文本输入框只能输入数字的4种方法1. keydown 通过阻止事件往keypress传播，来禁止非数字字符在文本框显示。 &lt;html&gt; &lt;head&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script ty
复制链接

扫一扫

专栏目录