Ce

contenteditable

HTML

<div id="banner" contenteditable="true">Hello World</div>
<pre id="out"></pre>

CSS

#out {
  height: 200px;
  overflow: auto;
  background: #eee;
}

JavaScript

// find elements
var banner = $("#banner")
var out = $("#out")

// handle click and add class
banner.on("change input", function(){
  var conent = banner[0].textContent;
  var charCode = conent.charCodeAt( conent.length - 1 );
  
  if ( charCode === 160 ) { // nbsp
  	charCode = charCode + ' (nbsp)';
  } else if ( charCode === 32 ) {
  	charCode = charCode + ' (space)';
  }
  
 // alert( conent.length - 1 )
  out[0].textContent = charCode + ' \n' + out[0].textContent;
})