JavaScript:限制字段 - 无法删除特殊符号

时间:2013-07-08 17:44:26

标签: javascript input special-characters textfield restrict

我试图仅通过在setInterval中检查输入文本并删除不是数字的字符来将输入文本限制为数字。到目前为止,这工作相对正常,但我无法删除“特殊符号”。例如,如果我输入西班牙语重音符号'或类似的符号应该在char上,它会重置字段并且不会再次分配值,尽管符号从字符串中删除(如果我记录字符串,我可以看到它。)

示例:

  1. 键入123a => 'a'已删除,输入包含123
  2. 键入123 =>输入包含一个空字符串,尽管事实上是'text'字符串 包含123并且长度为3.
  3. 键入123并在其后粘贴=>删除,输入包含123
  4. 这似乎与特殊符号不是......自立(?)并且需要在接下来应该输入的字符的事实有关。一些想法如何解决呢? 谢谢。

    我有以下HTML:

    <body>
        <input type="text" id="input_field">
    </body>
    

    和JS:

    $("#input_field").focus(function(e) {
                console.log("got focus"+$(this).val());
                var obj = this;
                intID = setInterval(function() {restrictNumbers(obj)}, 10);
            });
    
            $("#input_field").blur(function(e) {
                console.log("got blur")
                clearInterval(intID);
            });
    
            function restrictNumbers(field) {
                var text = $(field).val();
                var caretPos;
                var modified = false;
                if(text.length > 0) {
                    for(var i=0; i<text.length; i++) {
                        if(isNaN(text.charAt(i))) {
                            modified = true;
                            caretPos = field.selectionStart - 1;
                            text = text.replace(text.charAt(i), "");
                            i--;
                        }
                    }
                    $(field).val(text);
                    if(modified) {
                        modified = false;
                        field.setSelectionRange(caretPos, caretPos);
                    }
                }
            }
    

    JSfiddle示例:http://jsfiddle.net/AvMZ5/

1 个答案:

答案 0 :(得分:0)

您可以使用: -

jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

然后您可以通过执行以下操作将其附加到您的控件:

$("#yourTextBoxName").ForceNumericOnly();

来源: - https://gist.github.com/wholypantalones/3083362