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

Question

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

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

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

...другим решением этой проблемы было бы получить / установить местоположение курсора внутри элемента input или 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)

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

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

Answer 2

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

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

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