Js限制只能输入数字

最新推荐文章于 2023-01-31 11:21:38 发布

原创最新推荐文章于 2023-01-31 11:21:38 发布 · 4.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Js

Js 专栏收录该内容

2 篇文章

订阅专栏

本文分享了一段实用的JavaScript代码，用于限制HTML表单中数字输入框的输入，确保只接受数字字符，同时移除非法字符。通过监听键盘事件，有效防止非数字键输入，提升了用户体验。

直接上代码

1，引入<script src="/js/jquery-1.11.3.js"></script>

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

显示如下
在这里插入图片描述