darobin/composition.html

## composition.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CompositionUpdate</title>
  </head>
  <body>
    <input id="input">
    <pre id="log"></pre>
    <script>
      var input = document.getElementById('input')
        , log = document.getElementById('log')
      ;
      ['compositionstart', 'compositionupdate', 'compositionend', 'keydown']
        .forEach(function (event) {
          input.addEventListener(event, function (ev) {
            log.textContent += event + ': ' + (ev.data || ev.keyCode) + '\n';
          }, true);
        })
      ;
    </script>
  </body>
</html>

## results.md

      
    Raw
  

              results.md
            
          
    Composition Events

Running the above HTML file (see pen), and composing an à on my Mac keyboard (Alt-`, a)
I get the following results:


Gecko
Chromium
WebKit


keydown: 18
keydown: 18
keydown: 18


keydown: 192
keydown: 229
compositionstart: 0


compositionstart: undefined
compositionstart: undefined
compositionupdate: `


compositionupdate: `
compositionupdate: `
keydown: 229


compositionupdate: à
keydown: 229
compositionend: à


compositionend: à
compositionupdate: à
keydown: 229


                          | `compositionend`: à           |

I'm using keyCode instead of key because WebKit. The differences between the keydown values are not that important. The
difference in event order, and the fact that Firefox triggers no keydown after composition is initiated, Chrome gives you one in the middle, and Safari throws in an extra one at the end is fun!
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CompositionUpdate</title>
	</head>
	<body>
	<input id="input">
	<pre id="log"></pre>
	<script>
	var input = document.getElementById('input')
	, log = document.getElementById('log')
	;
	['compositionstart', 'compositionupdate', 'compositionend', 'keydown']
	.forEach(function (event) {
	input.addEventListener(event, function (ev) {
	log.textContent += event + ': ' + (ev.data \|\| ev.keyCode) + '\n';
	}, true);
	})
	;
	</script>
	</body>
	</html>
Gecko	Chromium	WebKit
`keydown`: 18	`keydown`: 18	`keydown`: 18
`keydown`: 192	`keydown`: 229	`compositionstart`: 0
`compositionstart`: undefined	`compositionstart`: undefined	`compositionupdate`: `
`compositionupdate`: `	`compositionupdate`: `	`keydown`: 229
`compositionupdate`: à	`keydown`: 229	`compositionend`: à
`compositionend`: à	`compositionupdate`: à	`keydown`: 229