JavaScript contenteditable 中的缩进文本

Question

我正在尝试在内容可编辑的 div 中缩进和取消缩进。缩进效果很好，但 outdent execCommand 不工作。我有一个最后一个键缓冲区，适用于其他键盘快捷键，但不适用于这个。感谢您的帮助。

        if (keyCode == 9) { /* indent */
            event.preventDefault();
            document.execCommand("indent");
        }
        if(keyCode == 9 && lastkey == 16){
            event.preventDefault();
            document.execCommand("outdent");
        }

Answer 1

您应该使用 if / else if 以便您只是运行两个命令之一，并且 lastKey 也作为系列中的第一个进行检查

我不确定你的 lastKey 变量是如何工作的，所以我添加了 event.shiftKey 用于演示

$(".myClass").on("keydown", function(event) {
  if (event.keyCode == 9 && event.shiftKey /* lastKey */ ) {
    event.preventDefault();
    document.execCommand("outdent");
  } else if (event.keyCode == 9) { /* indent */
    event.preventDefault();
    document.execCommand("indent");
  }
});

.myClass {
  display: block;
  height: 300px;
  width: 500px;
  border: 1px solid #bfbfbf;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myClass" contenteditable="true"></div>

JavaScript contenteditable 中的缩进文本

JavaScript Outdent text in contenteditable

javascript

execcommand