在使用 document.execCommand() 时如何防止 onInput 事件被触发？

Question

我有一个 div，用户可以通过 contenteditable 属性编辑其内容。当用户在 div 中键入内容时，将调用一个函数。我正在使用 oninput 事件来触发该函数，因为 onkeydown 不适用于该函数应该执行的某些操作。

我还有粗体、斜体和下划线按钮，允许用户通过 document.execCommand() 相应地设置文本样式。

我的问题：当用户使用按钮设置文本样式时，不应该触发在输入上触发的函数。但这就是正在发生的事情。有什么办法可以预防吗？

这是我的代码：

注意：对于这个例子，我简化了触发oninput的函数。实际上，它不仅仅是更改元素的 innerHTML。

JSFiddle

document.getElementById("editableDiv").focus();

function boldText () {
    document.execCommand("bold");
}

function myFunction () {
    document.getElementById("feedback").innerHTML="The content was changed."
}

body {
  padding: 10px;
  font-family: sans-serif;
}

input {
  padding: 5px;
  outline: 0;
  font-weight: bold;
}

div {
  margin: 10px 0;
  width: 200px;
  border: solid 1px #000;
  padding: 5px;
}

<input type="button" value="Bold" onclick="boldText();">

<div id="editableDiv" contenteditable="true" spellcheck="false" oninput="myFunction();">
  Hello, World!
</div>

<p id="feedback"></p>

Answer 1

我在函数中添加了 If 语句，使其仅在 event.inputType != "formatBold":

时有效

function myFunction() {
  if (event.inputType == "formatBold") {
    document.getElementById("feedback").innerHTML = "The text was stylized.";
  } else {
    document.getElementById("feedback").innerHTML = "The content was changed.";
    // + other things the function is supposed to do.
  }
}

在使用 document.execCommand() 时如何防止 onInput 事件被触发？

How do I keep an onInput event from being triggered when using document.execCommand()?

javascript

input

contenteditable

execcommand