我想在用户编辑带有contenteditable属性的div的内容时运行一个函数.onchange事件的类似功能是什么?

我使用jQuery,所以任何使用jQuery的解决方案都是首选.谢谢

推荐答案

我建议将监听器附加到可编辑元素触发的关键事件,不过您需要知道,在内容本身更改之前,会触发keydownkeypress个事件.这并不能涵盖更改内容的所有可能方法:用户还可以使用编辑或上下文浏览器菜单中的剪切、复制和粘贴,因此您可能还需要处理cut copypaste事件.此外,用户可以删除文本或其他内容,因此那里有更多的事件(例如mouseup).您可能希望轮询元素的内容作为备用.

UPDATE 29 October 2014

从长远来看,HTML5 input event才是答案.在 compose 本文时,当前Mozilla(来自Firefox14)和WebKit/Blink浏览器中的contenteditable个元素都支持它,但IE不支持.

Demo:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);
<div contenteditable="true" id="editor">Please type something in here</div>

演示:http://jsfiddle.net/ch6yn/2691/

Javascript相关问答推荐

Promise.all立即跳到那时,而不是调用所有Promise

vue3类型脚本中可能未定义对象''

React:未调用useState变量在调试器的事件处理程序中不可用

过滤对象数组并动态将属性放入新数组

Angular中计算信号和getter的区别

使用JQuery单击元素从新弹出窗口获取值

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

rxjs插入延迟数据

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

如何将zoom 变换应用到我的d3力有向图?

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

在不删除代码的情况下禁用Java弹出功能WordPress

如何修复使用axios运行TSC index.ts时出现的错误?

在渲染turbo流之后滚动到元素

如何在AG-Grid文本字段中创建占位符

如果对象中的字段等于某个值,则从数组列表中删除对象

是否设置以JavaScript为背景的画布元素?

通过解构/功能组件接收props-prop验证中缺少错误"

TypeORM QueryBuilder限制联接到一条记录