Differency normal characters and half characters on keydown

Question

We forked experimental Mediawiki VisualEditor. This WYSIWYM editor work with a hidden textarea and a representation of the content in DOM. When you focus the view, the focus is given to the textarea, and the view listen to keydown event to add each typed characters to the content, then empty the textarea's value.

The problem occurs with half characters on Mac OS X only. If you type ^or ¨ or any characters which need a second character to be printed, keydown event is fired. So, when user want a 'ê', he types '^'. View get the textarea value ('^') and clean the textarea value. Then, the user type 'e'. The view display '^e'. And as bonus, on Chrome (Firefox is better in this case), user will never be able to type any accents on the current page in any inputs without reloading the window.

Is there any way to make the difference between a real character and a half one ?

Answer 1

Just found a workaround. By listening to keyup event, dead keys returns a keyIdentifier property set to Unidentified.

So :

keyuphandler = function(e)
{
    if (e.keyIdentifier === 'Unidentified')
    {
        return;
    }
    doSomething();
}

Answer 2

Do you get the character from the key down event or do you read it from the text area? I just tried this with an input field and it's value did not change on the first press of the ^ button. However, I am using windows. The last resort would obviously be to handle these modifying key presses differently. This might get somewhat complex if you aim to support key combinations like alt+654. I will try it again on my mac as soon as I get home after work.