Ограничение символов JavaScript - неверные символы временно отображаются

Question

Я использую JavaScript для ограничения символов различных полей текста в качестве формы проверки на стороне клиента, а также улучшенного удобства использования. Я использую следующий код для этого:

function validNumbers(caller) {
    var exp = /^[\d.]+/g;
    var str = '';
    if (caller.value.match(exp)) {
        str = caller.value.match(exp).toString();
    } else {
        str = '';
    }
    str = str.replace(/\D/g,'');
    caller.value = str;
}

Я называю эту функцию с помощью onkeypress = "validnumbers (this);" И, по большей части, это работает как очарование. Проблема в том, что, когда я ввожу недопустимый символ в поле, значение поля, по -видимому, обновляется (с точки зрения JavaScript), но символ остается до тех пор, пока я не нажму следующий ключ, и в этот момент это заменяется значением следующего ключа визуально, даже если следующий ключ также недействителен. Желаемый эффект заключается в том, что, когда нажимается неверная клавиша, неверное значение даже не отображается визуально. Как мне это сделать?

РЕДАКТИРОВАТЬ: Я выбрал ответ ниже, потому что он привел меня на правильный трек. Мне нужно было убедиться, что E.ShiftKey в мой список исключенных событий, чтобы предотвратить такие символы «!@#$%^&*() _+», Но для меня это не было проблемой, чтобы узнать самостоятельно.

Answer 1

В вашей функции вы очищаете значение после того, как оно было введено в текстовое поле и оценивается. Вместо этого вам необходимо предотвратить его вообще введено в текстовое поле. Чтобы сделать это, вы хотите использовать Keydown preventDefault() Метод:

onkeydown="function(e) { validNumbers(e); }"

function validNumbers(e) {
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) {
        e.preventDefault();
    }
}

Это заблокирует определенные символы (ссылка здесь) от вступления в поле ввода. Обратите внимание, что это не будет блокировать копирование и вставку, поэтому вам все еще нужно оценить всю строку «OnPaste», либо предотвратить «OnPaste» с аналогичным обработчиком событий.

Это также не перекрестное решение, но должно сделать ваши ноги достаточно мокрыми. Посмотри это Jsfiddle Для живого примера.