compositionstart, compositionend and Japanese Input Method

How to capture Japanese Input Method behaviors with compositionstart and compositionend events.

by Artem

HTML

<textarea name="textarea" id="textarea" cols="30" rows="3"></textarea>
<h2>Event: onkeydown</h2>
<dl>
    <dt>keyCode</dt>
    <dd><span id="keyCode">-</span></dd>
    <dt>nowCompositioning</dt>
    <dd><span id="nowCompositioning">false</span></dd>

JavaScript

var nowCompositioning = false;

$('#textarea').on('compositionstart', function () {
		console.log('1111');
    nowCompositioning = true;
});

$('#textarea').on('compositionend', function () {
		console.log('22222');
    nowCompositioning = false;
});

$('#textarea').on('keydown', function (ev) {
    $('#nowCompositioning').text(nowCompositioning);
    $('#keyCode').text(ev.keyCode);
});