input event (contenteditable)

https://developer.mozilla.org/ja/docs/Web/Events/input

by ginpei

HTML

<div id="input" contenteditable="true"></div>
<div>Input: <span id="output"></span></div>
<div>Change: <span id="output2"></span></div>

CSS

#input {
  border: 1px inset;
  font-family: monospace;
  line-height: 1em;
  min-height: 1em;
  padding: 0.2em;
}

JavaScript

// IE 9+
$(function() {
  var $input = $('#input');
  var $output = $('#output');
  $input.on('input', function(event) {
  	$output.text($input.html());
  });
  
  
  var $output2 = $('#output2');
  $input.on('change', function(event) {
  	$output2.text($input.html());
  });
});