为什么 contenteditable beforeinput 事件不可取消?

问题描述 投票:0回答:1

阅读 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>
  

javascript contenteditable
1个回答
0
投票

最新的输入事件规范引入了 beforeinput 事件,这些事件在编辑操作发生任何更改之前调度。这些事件可以通过在事件上调用 PreventDefault() 来取消,这也会阻止调度后续输入事件。

您链接的文档仅说明该规范引入了可取消事件。

那么如何在 Chrome 或其他 Webkit 浏览器中取消它们呢?这就是最精彩的部分,但你不知道。

他们没有实施该规范。这么多年过去了,仍然没有迹象表明他们会这么做。

© www.soinside.com 2019 - 2024. All rights reserved.