Ограничение символов в 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

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

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

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

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