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 ?

I just learned that the half key has a real name ! It's called a "Dead Key" ! — user1412772, May 23 '12 at 14:29
Related: https://phabricator.wikimedia.org/T52631#844225 , https://phabricator.wikimedia.org/T51569 — Nemo, Apr 06 '15 at 16:26

score 3 · Accepted Answer · answered May 24 '12 at 08:12

3

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();
}

answered May 24 '12 at 08:12

user1412772

51
4

score 0 · Answer 2 · answered May 23 '12 at 14:12

0

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.

answered May 23 '12 at 14:12

Axel Wilczek

195
2
9

You might want to consider using a "normal" input field and copying its content to the DOM once the user presses enter. – Axel Wilczek May 23 '12 at 14:22
The editor listen to keydown event, and look at the textarea.value. I had some tries with keydown, keyup, keypress and value and e object. I found nothing to differency the keys… – user1412772 May 23 '12 at 14:30
And all is working fine on Windows and Linux. Only Mac OS X fail :( – user1412772 May 23 '12 at 14:32

Differency normal characters and half characters on keydown

2 Answers2

Linked