Запустите нажатие клавиши с помощью jQuery ... и укажите, какая клавиша была нажата

Question

Я хотел бы иметь элемент ввода (type = text) или элемент textarea, который проверяет динамически, вызывая определенные нажатия клавиш. Это будет использоваться для ввода китайского пиньинь, например:

Пользователь вводит "ma2" в элемент ввода. Событие keydown срабатывает при каждом нажатии клавиши, а 2 никогда не появляется. Вместо этого, когда пользователь нажимает «2», «а» получит тональную метку, например: «а». В конце пользователь наберет: "má".

Это может быть достигнуто путем чтения и изменения всего входного значения с помощью $ (element) .val (), однако, когда входной элемент имеет фокус, а его значение устанавливается путем вызова .val («что-то»), курсор перемещается до конца текста. Это прекрасно работает в большинстве ситуаций, потому что пользователь просто продолжает печатать в конце поля, но я хочу, чтобы это работало в всех ситуациях.

... еще одно решение этой проблемы - получить / установить местоположение курсора внутри элемента ввода или элемента textarea. Я не думаю, что это возможно в JavaScript, однако.

---

Итак, Реми был на верном пути. Нажатие клавиш не позволило бы мне вводить специальные символы без особых хлопот. Вместо этого я перехватываю событие keydown и устанавливаю значение input / textarea, а затем перемещаю курсор.

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

http://blog.vishalon.net/Post/57.aspx http://demo.vishalon.net/getset.htm

Answer 1

Вам может не повезти, если вы нажмете клавишу - я вполне уверен, что если нажатие клавиши не является доверенным (т.е. происходит из браузера), оно не будет подхвачено.

Однако вы можете заменить текст и вставить карат туда, где он был - вместо того, чтобы стрелять в конец строки. Вам нужно использовать setSelectionRange и createTextRange (для IE).

Я собрал небольшую демонстрацию - замены, которые вы увидите, не соответствуют реальным словам, но показывают, как это работает:

http://jsbin.com/emudi/ (для редактирования источника http://jsbin.com/emudi/edit)

Хитрость заключается в том, чтобы заметить, где находится карат, заменить найденное слово с использованием substr (вместо регулярного выражения, чтобы избежать замены неправильных совпадений), а затем переместить карат в конец нового слова.

Замена срабатывает на пробел или размытие. Примечание по этому поводу - вы можете запустить замену для конкретного символа (то есть '2'), но я бы не рекомендовал искать замены для при каждом нажатии клавиши.

Answer 2

Кроме того, для простого кода, управляющего «кареткой» в кросс-браузерном режиме, это может быть полезно:

http://javascript.nwbox.com/cursor_position/

немного опоздал с ответом, но я уверен, что вы все еще найдете этот старый материал полезным.