Инициировать нажатие клавиши с помощью jQuery и указать, какая клавиша была нажата

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

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

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

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


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

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

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


person user27948    schedule 14.10.2008    source источник


Ответы (2)


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

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

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

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

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

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

person Remy Sharp    schedule 14.10.2008

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

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

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

person Diego Perini    schedule 21.02.2010