Composition events

HTML

<textarea id="test"></textarea>

<p>Output:</p>
<div id="output"></div>

CSS

body {
    font-family: sans-serif;
    word-wrap: break-word;
    line-height: 1.5;
}

p {
    line-height: 1;
    font-weight: bold;
}

#test {
    min-height: 7em;
    padding: 0.5em;
    border: 1px solid #aaa;
}

#output, #unicodeOutput, #count {
    min-height: 1.5em;
    padding: 0.5em;
    border: 1px solid #bbb;
    background: #eee;
}

JavaScript

var onCompositionEvent = function (e) {
console.log(1);
    var outStr = '';
    
    for (var prop in e) {
        outStr += prop + ': ' + e[prop] + '<br />';
    }
    
    document.getElementById('output').innerHTML = outStr;
};

var test = document.getElementById('test');
test.addEventListener('compositionstart', onCompositionEvent, false);
test.addEventListener('compositionupdate', onCompositionEvent, false);
test.addEventListener('compositionend', onCompositionEvent, false);