JavaScript: Ограничение полей — нельзя удалять специальные символы

Я пытаюсь ограничить ввод текста только числами, проверив его в setInterval и удалив символы, которые не являются числами. Пока это работает относительно хорошо, однако я не могу удалить «специальные символы». Например, если я ввожу символ испанского акцента ' или такие символы, как ˇ, которые должны быть над символом, он сбрасывает поле, и значение не присваивается снова, несмотря на то, что символ удаляется из строки (если я регистрирую строку, Я вижу, что это).

Пример:

  1. Ввод 123a => 'a' удален, ввод содержит 123
  2. Ввод 123ˇ => input содержит пустую строку, несмотря на то, что строка 'text' содержит 123 и имеет длину 3.
  3. Ввод 123 и вставка ˇ после него => ˇ удаляется, ввод содержит 123

Кажется, это как-то связано с тем фактом, что специальные символы не являются ... самостоятельными (?) и должны быть над символом, который должен быть введен следующим. Есть идеи, как это решить? Спасибо.

У меня есть следующий 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/


person Fygo    schedule 08.07.2013    source источник


Ответы (1)


Вы можете использовать это: -

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

person Vivek Sadh    schedule 08.07.2013
comment
Спасибо за это, но он не позволяет использовать сочетания клавиш (и это очень важно). - person Fygo; 08.07.2013