EditableContent Change event

EditableContent Change event

by David Capelo

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="mycontent" contenteditable="true" tabindex="0">My text</div>

CSS

#mycontent { 
  font-family: arial;
  font-size: 20px;
  height:40px;
  width: 200px;
  border:solid 2px lightblue;
  border-radius: 5px;
  padding:5px;
  vertical-alig: center;  
}

JavaScript

var $editableContent = $("#mycontent");

//  Implement on text change
$editableContent.on("focus", function(event) {$(this).data("currentText", $(this).text());});

$editableContent.on("blur",	function (event) {
		if ($(this).text() != $(this).data("currentText")) {
				$(this).trigger('change');}});
        
        
// 	Wire onchange event
$editableContent.on("change", function(){alert("Text changed to: " + $(this).text())});