-
-
Save 3014zhangshuo/4d3a96c72a307ff68f975dec3e91af5c to your computer and use it in GitHub Desktop.
jquery plugin to make contenteditable text trigger a change event when it changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function ($) { | |
'use strict'; | |
/** | |
* Makes contenteditable elements within a container generate change events. | |
* | |
* When you do, e.g. $obj.editable(), all the DOM elements with attribute contenteditable | |
* that are children of the DOM element $obj will trigger a change event when their | |
* contents is edited and changed. | |
* | |
* See: http://html5demos.com/contenteditable | |
* | |
* @return {*} | |
*/ | |
$.fn.editable = function () { | |
this.on('focus', '[contenteditable]', function () { | |
var $this = $(this); | |
$this.data('beforeContentEdit', $this.html()); | |
}); | |
this.on('blur', '[contenteditable]', function () { | |
var $this = $(this); | |
if ($this.data('beforeContentEdit') !== $this.html()) { | |
$this.removeData('beforeContentEdit').trigger('change'); | |
} | |
}); | |
return this; | |
}; | |
}(jQuery)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment