Question

我在页面上有一个小的contenteditable范围。在某些情况下（例如，按下转义键），我想以编程方式取消编辑模式。

有办法吗？

到目前为止，我发现只有黑客才能删除那个令人满意的attr并在此后不久恢复它（例如100ms左右），这可能不是正确的方式:-(我想我可以改变焦点同样的效果。

我真正想要的是elem.endEdit()或其他一些......

谢谢！

Answer 1

您可以在正在编辑的元素上调用blur（）。这是一个示例：https://codepen.io/MarcMouries/pen/PowEYRv

<h3>Editable content</h3>
<div contenteditable="true" id="editor">Click me, type something, then press the ESC key</div>
<h3>Events</h3>
<textarea id="log" rows="10" cols="100" readonly></textarea>

var element = document.getElementById("editor");
var eventsLog = document.getElementById("log");
var oldValue = "";
document.addEventListener('keyup', (e) => {
    if (event.keyCode == 27) {
      eventsLog.value += "ESC key pressed => UNDO reset to (" + oldValue + ")\n";
          var element = event.target;
      element.textContent = oldValue;
          element.blur();
        }
}, false);
element.addEventListener("focus", function(event) {
    var element = event.target;
      oldValue = element.textContent;
    eventsLog.value += "FOCUS: value = " + oldValue + "\n";

});
element.addEventListener("blur", function(event) {
    var element = event.target;
        var newValue = element.textContent;
    if(newValue != oldValue) {
          eventsLog.value += "Input changed value to: " + newValue + "  \n";
    }
}, false);

Answer 2

只需将contenteditable设置为false（假设您的div的ID为“内容”）：

document.querySelector("#content").setAttribute("contenteditable", false);

有关contenteditable的更多信息，请查看MDN

这是一个Fiddle。底部有一个“停止”按钮。

如果你想停在Escape，你必须听“onkeyup”的事件

使用contenteditable时取消编辑模式的编程方式？

2 个答案: