可编辑元素的更改事件

Question

可编辑元素的更改事件

javascriptjqueryhtmlcontenteditable

494

我希望在用户编辑具有contenteditable属性的

内容时运行函数。相当于onchange事件的是什么？

我正在使用jQuery，因此任何使用jQuery的解决方案都是首选。谢谢！

- Jourkey

3

我通常会这样做：document.getElementById("editor").oninput = function() { ...}。 - Basj

1

页面下方有一篇很好的答案，发布于2020年：https://dev59.com/N3M_5IYBdhLWcg3waSX9#49287032 - Jack Steam

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lawrence Whiteside · Answer 1

看看这个想法。 http://pastie.org/1096892

我认为它很接近。HTML 5真的需要将change事件添加到规范中。唯一的问题是回调函数在$(this).html()实际更新内容之前评估if (before == $(this).html())。setTimeout不起作用，这很遗憾。让我知道你的想法。

- Phillip Senn · Answer 2

基于 @balupton 的回答：

$(document).on('focus', '[contenteditable]', e => {
 const self = $(e.target)
 self.data('before', self.html())
})
$(document).on('blur', '[contenteditable]', e => {
 const self = $(e.target)
 if (self.data('before') !== self.html()) {
   self.trigger('change')
 }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>