JS限制只允许数字输入

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

多隆

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

阅读量4.7k

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78542656

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

示例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <script src="/js/jquery-3.1.0.min.js"></script>
</head>
<body>
    <label for="number">测试数字输入</label>
    <input type="number" class="form-control" id="number" name="number" value="1" maxlength="1" placeholder="测试数字输入" required>


    <script type="text/javascript">
    $(document).ready(function() {
        $("input[type='number']").keydown(function(evt) {
            var iKeyCode = window.event?evt.keyCode:evt.which;    
            /*    
            ascii码说明： 
            8：退格键 
            46：delete 
            37-40： 方向键 
            48-57：小键盘区的数字 
            96-105：主键盘区的数字 
            110、190：小键盘区和主键盘区的小数点 
            189、109：小键盘区和主键盘区的负号 

            13：回车 
            9： Tab 就是那个把焦点移到下一个文本框的东东。 
            */  
            if((iKeyCode>=48) && (iKeyCode<=57) || (iKeyCode>=96) && (iKeyCode<=105) || (iKeyCode>=37) && (iKeyCode<=40) ||iKeyCode===8|| iKeyCode==46) {

            } else {    
                if (window.event) {    
                    //IE 
                    event.returnValue = false;    
                } else {    
                    //Firefox
                    evt.preventDefault();    
                }    
            }
        }).keyup(function() {
            $(this).val($(this).val().replace(/[^0-9]/g,''));
        });
    });
    </script>
</body>
</html>

显示效果

这里写图片描述

多隆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS限制只允许数字输入

示例代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title> <script src="/js/jquery-3.1.0.min.js"></script></head><
复制链接

扫一扫