Content Editable test

by Takayoshi Kochi

HTML

<div id="edit" contenteditable=true>
      This is an editable div.
</div>
<div id="console"></div>

CSS

#edit {
  /* -webkit-transform:rotate(20deg); */
  height: 200px;
  padding: 10px;
  border: solid 1px black;
}

#console {
  height: 200px;
  padding: 10px;
  overflow: scroll;
}

JavaScript

$("docoment").ready(function() {
    var edit = $('#edit')[0];
    edit.addEventListener("compositionstart", function(ev) {
      log("compositionstart :" + ev.data);
      //e.preventDefault();
      //return false;
    }, false);
    edit.addEventListener("compositionupdate", function(ev) {
      log("compositionupdate :" + ev.data);
      //e.preventDefault();
      //return false;
    }, false);
    edit.addEventListener("compositionend", function(ev) {
      log("compositionend :" + ev.data);
      //e.preventDefault();
      //return false;
    }, false);
    var message = true;
    $('#edit').focus(function() {
      if (message) {
        $('#edit').text('');
        message = false;
      }
    });
  });

  var $start = Date.now();
  function log(message) {
    var console = $('#console')[0];
    var time = (Date.now() - $start) / 1000;

    console.innerHTML += time + ": " + message + "<br>";
    console.scrollTop = console.scrollHeight;
  }