CODEWITHSUNDEEP
javascriptgwtinputuser-inputcjk
nogridbag
nogridbag

Reputation: 3703

Javascript - Detecting chinese character input like Google docs

I'm trying to reliably detect when chinese characters are inserted into a text box. If I add keyup, keydown, and keypress handlers to an input field, no event is fired when the user selects a chinese character from an IME (input method editor). For example, on Mac/Firefox with Chinese simplified pinyan if I type:

ni then hit 1

I only receive the keydown event for 'n' and the key up for '1'. No keypress event is fired. Note: I'm using GWT but I don't think it should matter.

I was curious how Google docs does this. I noticed specifically for Chinese, the 'n' character appended as text to a hidden iframe with the class "docs-texteventtarget-iframe" (but not the 'i'). I would imagine they're doing this to detect when a chinese character is inserted.

How does Google docs know that the input language changed to chinese? For instance, if my input language is English and I type 'n', it is not appended to that hidden iframe. Is there any common techniques to detecting chinese character key events?

Upvotes: 3

Views: 2201

Answers (2)

g.u.
g.u.

Reputation: 31

When the user inputs text using an IME (Input Method Editor), then before the content of the input field changes, there is a lot of interaction going on within the IME composition window. You can detect this through the compositionstart and compositionend events. In fact, while composition is in progress, you definitely do not want to steal the keyup/keydows events from the IME. On a text input element you can then catch when the content changes through the input event.

Upvotes: 2

pfranza
pfranza

Reputation: 3367

I would suspect that you are not getting a keypress event because the input is coming from an IME instead of the keyboard, just as you don't get key events if you paste into a field.

You can try adding a ValueChangeHandler to the textbox to see if that catches the events that you are looking for.

Upvotes: 1

Related Questions