阅读 this webkit 文档,它说与 contenteditable 一起使用时的 beforeinput 事件是可以取消的。但我在 Chrome 浏览器上运行文档中的代码,该事件不可取消。
我错了吗?如何让beforeinput事件可取消?
<body onload="setup()">
<div id="editor" contenteditable>
<p>This is some regular content.</p>
<p>This text is fully editable.</p>
<div class="quote" style="background-color: #EFFEFE;">
<p>This is some quoted content.</p>
<p>You can only change the format of this text.</p>
</div>
<p>This is some more regular content.</p>
<p>This text is also fully editable.</p>
</div>
</body>
<script>
function setup()
{
editor.addEventListener("beforeinput", event =>
{
if (event.inputType.match(/^format/))
return;
for (let staticRange of event.getTargetRanges())
{
if (nodeIsInsideQuote(staticRange.startContainer)
|| nodeIsInsideQuote(staticRange.endContainer))
{
event.preventDefault();
return;
}
}
});
function nodeIsInsideQuote(node)
{
let currentElement = node.nodeType == Node.ELEMENT_NODE ? node : node.parentElement;
while (currentElement)
{
if (currentElement.classList.contains("quote"))
return true;
currentElement = currentElement.parentElement;
}
return false;
}
}
</script>
最新的输入事件规范引入了 beforeinput 事件,这些事件在编辑操作发生任何更改之前调度。这些事件可以通过在事件上调用 PreventDefault() 来取消,这也会阻止调度后续输入事件。
您链接的文档仅说明该规范引入了可取消事件。
那么如何在 Chrome 或其他 Webkit 浏览器中取消它们呢?这就是最精彩的部分,但你不知道。
他们没有实施该规范。这么多年过去了,仍然没有迹象表明他们会这么做。