Предисловие
Недавно продукт должен сделать много входных коробок. Интерактивный эффект, который хочет продукт, заключается в том, что пользователь может войти в китайский и английский язык, и, как вводится пользовательский ввод, количество введенных символов может отображаться в режиме реального времени. Когда предел количества превышает предел, граница ввода ввода становится красной, и пользователю предлагается для информации.
Это взаимодействие звучит как без проблем, и, похоже, нет никаких трудностей в технической реализации. Но когда я понял это, я столкнулся с методом ввода Китая и обнаружил, что были подводные камни.
Какой трюк, давайте посмотрим ниже ~~
Мониторинг длины содержимого в входном поле в реальном времени, для мониторинга события oninput .
Есть 2 преимущества использования этого события oninput :
Когда пользователь меняет содержимое ящика ввода, щелкнув правой кнопкой мыши, его можно услышать;
Это событие будет вызвано только при изменении содержания окна ввода. Например, это событие не будет инициировано, когда пользователь нажимает клавиши элементов управления, такие как клавиши со стрелками, control / shift и т. Д.;
Эффект идеально подходит, когда вы вводите английские персонажи или числа, и даже когда вы正常输入中文. Но когда вы非正常输入中文возникнет ошибка. Каким является ненормальный вход? См. Следующий пример изображения:
Ты это видел? В этом китайском методе ввода пользователь не ввел китайцы, которые он хочет ввести, но только что ввел несколько пининжинов, но input событие было запускается, а value выслушивания ввода на самом деле является d'd'd , не только символы пинкина, но и отдельные точки. Если длина содержимого входного блока ограничена не более 5, то в случае экрана, пользователь будет предложено, чтобы字符长度超过限制！ Полем Конечно, такие интерактивные эффекты не являются тем, чего хочет продукт.
Используйте события onkeydown / onkeypress / onkeyup , чтобы послушать
Недостаток этих событий заключается в том, что они не могут прослушать входной контент, скопированный с правой кнопки, но будет ли та же проблема, что и input событие?
Я прошел несколько экспериментов и обнаружил, что keydown и keyup столкнутся с теми же проблемами, что и input , но keypress нет этой проблемы, потому что в состоянии ввода китайского ввода keypress не запускается не только в процессе входа в пийнин, но и не будет запускать после того, как вы выберете китайский язык, который вы хотите ввести, таким как «правильно, правильно». Затем, когда вводится «справа, справа», хотя предел символа превышен,字符长度超过限制！ Советы для.
Компромиссное решение
Чтобы отслеживать длину контента в режиме реального времени и убедиться, что в методе ввода Китая нет ошибок, я долго боролся и, наконец, обнаружил, что не могу этого сделать! (Если какой -либо герой найден, скажите, пожалуйста, ~~).
Таким образом, в конце концов, пользовательский опыт был принесен в жертву, и был найден компромисс: входная коробка потеряла свое внимание (то есть blur ), или пользователь проверил длину контента только при введении ввода клавиши. Конечно, если вы обнаружите, что содержание блока ввода превышает предел, вы должны держать курсор в поле ввода, чтобы облегчить изменение пользователя.
Увы,用户输入回车键时才进行内容长度的检测и ловушки, которые он был посажен ранее.
Как определить, что клавиша Enter введен в поле ввода
На самом деле, это очень распространенное взаимодействие. Например, при изменении имени он поддерживает пользователя ввести и сохранять непосредственно после входа в перевозку, а при входе в систему он поддерживает пользователя ввести и войти в систему сразу после входа в перевозку. Но подводная ловушка, чтобы быть осторожным: **中文输入法下按回车键来输入英文字符** .
Примеры процесса нажатия клавиши Enter для ввода английских символов в рамках метода ввода Китая:
Например, если я хочу ввести учетную запись для входа в систему, моя учетная запись на всех английских. В настоящее время я нахожусь в китайском методе ввода, но я слишком ленив, чтобы переключать метод ввода, поэтому я непосредственно набрал свою учетную запись (все английские символы). В настоящее время метод ввода Sogou вызвал мне большую цепочку китайцев, а затем я нажал Enter, и входная окно вводило английские символы, которые я хотел.
В этом случае, хотя пользователь ввел клавишу Enter, пользователь нажал клавишу Enter, чтобы ввести английские символы в рамках метода ввода Китая. Этот ключ ввода не является ключом Enter, который мы хотим контролировать. Итак, как исключить ключ Enter в этом случае?
Вообще говоря, при прослушивании клавиши Enter мы будем использовать событие keydown или событие keyup , а код реализации выглядит следующим образом. Так могут ли оба метода отфильтровать ключи Enter, которые мы не хотим слушать?
// Метод 1: Использовать input ovent ovent.onkeydown = function = function (e) {if (e.keyCode == 13) {// пользователь вводит enter -ключ // DOS -связанные операции}} // Метод 2: Использовать вход CeaUp.onkeyup = function (e) {if (e.keycode == 13) {// Пользователь вводит ключ Enter // DOS, связанный После экспериментов было обнаружено, что использование keydown может успешно фильтровать, но использование keyup не может.
Итак, давайте посмотрим, почему?
Это связано с тем, что в событии keydown : ключ ввода клавиши, введенный в состояние метода ввода Китая, обнаруженный keyCode составляет 229 вместо 13 ; При простое вступление в возврат, keyCode составляет 13 .
В событии keyup : keyCode обнаруженный путем ввода клавиши Enter в состояние метода ввода Китая, составляет 13 ; При простое вводе ввод, keyCode также составляет 13 .
Следующий рисунок - результат, который я напечатал в консоли: (см. Здесь для примера кода)
Заключение
Несколько событий, участвующих в поле ввода: Keydown/Keyup/KeyPress/Input/изменение
Просмотр здесь: //www.vevb.com/article/21237.htm