EditInPlace.js

EditInPlace.js

var editor   = null;
var sleeping = null;
var sleepingParent = null;

function handler(ev) {
  var el   = ev.target;
  if (sleeping) {
    sleeping.innerHTML = editor.value;
    editor.value = '';
    editor.defaultValue = editor.value;
    sleepingParent.replaceChild(sleeping,editor);
  }
  sleeping       = el;
  sleepingParent = el.parentNode;
  editor.value        = sleeping.innerHTML;
  editor.defaultValue = editor.value;
  el.parentNode.replaceChild(editor,el);
  editor.focus();
  ev.preventDefault();
  ev.stopPropagation();
  return false;
}

function editorpress() {
  sleeping.innerHTML = editor.value;
  //setTimeout(function(){sleeping.innerHTML = editor.value;},0);
}

function handlerout()  {
  if (sleeping) {
    sleeping.innerHTML = editor.value;
    editor.value = '';
    editor.defaultValue = editor.value;
    sleepingParent.replaceChild(sleeping,editor);
    sleeping = sleepingParent = null;
  }
}  

window.onload = function() {
  editor    = document.createElement('TEXTAREA');
  editor.id = 'editor';
  editor.onmouseout = handlerout;
  var els = Array.prototype.slice.call(document.querySelectorAll('.editable'));
  els.forEach(function(it){
    it.onclick = handler;
  });
  editor.onkeyup = editorpress;
}

window.onclick = handlerout;