数字输入验证

时间:2013-06-24 03:23:12

标签: javascript javascript-events

我正在对input type ='text'元素进行验证。我已经连接了'paste'和'keydown'事件来捕获输入并将其限制为仅数字。 keydown似乎毫无障碍地工作,然而,我似乎无法让任何浏览器实际上没有将文本粘贴到字段中(我看到有一个beforepaste事件,可能是票证 - 但是它出现了最后,如果值不是一个数字,我最终只是消除了输入。这会导致瞬间闪烁,但似乎有效。

有更清洁的方法吗?我错过了什么吗?反正有没有阻止闪烁?我知道HTML5有一个type ='number',但我还没准备好去那里。

<input type="text" id="number" />

<script type="text/javascript">
    $(document).ready(function () {

        enableNumericOnlyEntry("#number");

        function enableNumericOnlyEntry(object) {
            $(object).bind('paste', numericOnlyPaste);
            $(object).bind('keydown', null, numericOnlyKeyDown);

            function numericOnlyPaste(event) {
                var inputText = "";
                var element = event.target;
                setTimeout(function () {
                    var text = $(element).val();
                    if (isNaN(text)) {
                        $(element).val("")
                        return false;
                    }
                }, 0);
            }

            function numericOnlyKeyDown(event) {
                // Allow: backspace, delete, tab, escape, and enter
                if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                    // Allow: Ctrl+A/a
                    (event.keyCode == 65 || event.keyCode == 97) && (event.ctrlKey === true) ||
                    // Allow: Ctrl+C/c
                    (event.keyCode == 67 || event.keyCode == 99) && (event.ctrlKey === true) ||
                    // Allow: Ctrl+V/v
                    (event.keyCode == 86 || event.keyCode == 118) && (event.ctrlKey === true) ||
                    // Allow: Ctrl+X/x
                    (event.keyCode == 88 || event.keyCode == 120) && (event.ctrlKey === true) ||
                    // Allow: home, end, left, right
                    (event.keyCode >= 35 && event.keyCode <= 39)) {
                    // let it happen, don't do anything
                    return true;
                }
                else {
                    // Ensure that it is a number and stop the keypress
                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                        return false;
                    }
                }
            }
        }
    });

2 个答案:

答案 0 :(得分:0)

我已经使用这个项目来创建一个掩盖了编辑框的字段,你也可以删除下划线,这样看起来就像是一个蒙版编辑。真的很容易使用:http://digitalbush.com/projects/masked-input-plugin/

然后你会使用类似$(“#box”)的东西.mask(“9999999”);你的好去,效果很好!

答案 1 :(得分:0)

HTML5的<input type="number">确实是你想要的地方。如果你正在使用支持它的浏览器(基本上除了Safari和旧版本的IE之外的所有东西),它会做你想要的一切。

那就是说,为什么不注册一个onpaste处理程序,以便在用户粘贴后将粘贴的内容减少到只是数字?