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

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

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

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

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

источник

2016-03-08 Carcigenicate

Вы действительно нуждаетесь в * предотвращении * обратного хода? Другой подход может заключаться в обнаружении, когда это происходит, а затем заменить поле входного элемента на то, что «должно» быть там. – Brandin

@Brandin Мне не нужно *, но я бы хотел. И я это пробовал, но главный обработчик пресса срабатывает * до того, как текст помещается в поле, поэтому я не могу просто заменить ключ с обратным интервалом, так как он не удаляется до тех пор, пока обработчик не выстрелил. – Carcigenicate

Вам нужно определить 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>

источник

2016-03-08 15:10:06

Спасибо. В итоге это немного усложнилось, поскольку, если вы используете 'onkeydown', вам нужно вручную использовать буквы. Я закончил прикреплять обоих обработчиков, используя 'onkeypress' для печатных символов и' onkeydown' для непечатаемых символов. Кажется, работает до сих пор. – Carcigenicate

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

ответ

Смежные вопросы