Предотвратить возврат в текстовое поле ввода

Я делаю веб-приложение, которое проверяет скорость набора текста.

Он дает пользователю текст для ввода и поле ввода для ввода. Если пользователь вводит неверный ключ, я использую preventDefault для созданного события ключа, чтобы предотвратить ввод неправильного символа в поле ввода (вместо этого я показываю пользователю сообщение об ошибке).

Проблема в том, что preventDefault не предотвращает ввод пробелов. В идеале, поскольку неправильные нажатия клавиш никогда не будут введены в текстовое поле, не имеет смысла разрешать возврат. Если пользователь обычно нажимает клавишу Backspace при предполагаемой ошибке, это приводит к тому, что текст в поле ввода становится неверным. Это не влияет на результаты теста, просто это не идеальная ситуация.

Как я могу предотвратить обратный интервал в элементах ввода HTML5 типа «текст»?


html input-field javascript-events
person Carcigenicate    schedule 08.03.2016    source источник
comment
Вам действительно нужно предотвратить отступ? Другой подход может заключаться в том, чтобы определить, когда это происходит, а затем заменить поле элемента ввода тем, что должно быть там.   -  person Brandin    schedule 08.03.2016
comment
@Brandin Мне не нужно, но я бы хотел. И я пробовал это, но обработчик нажатия клавиши срабатывает до, текст помещается в поле, поэтому я не могу просто заменить клавишу с обратным интервалом, поскольку она не удаляется до тех пор, пока обработчик не сработает .   -  person Carcigenicate    schedule 08.03.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно определить onkeydown вместо onkeypress, и он должен работать (проверено в Firefox/Safari). В некоторых браузерах onkeypress ограничен печатными символами, тогда как onkeydown предназначен для всех событий нажатия клавиши.

<!doctype html>
<html lang="en">
    <head>
        <script type="text/javascript">
            function no_backspaces(event)
            {
                backspace = 8;
                if (event.keyCode == backspace) event.preventDefault();
            }
        </script>
    </head>
    <body>
        <input id="typeHere" onkeydown="no_backspaces(event);"/>
    </body>
</html>
person Michael Mulqueen    schedule 08.03.2016
comment
Спасибо. Однако это оказалось немного сложнее, поскольку, если вы используете onkeydown, вам нужно вручную делать заглавные буквы. В итоге я подключил оба обработчика, используя onkeypress для печатных символов и onkeydown для непечатаемых символов. Кажется, пока работает так, как ожидалось. - person Carcigenicate; 09.03.2016