contenteditable 中的 JavaScript 缩进文本

Question

我正在尝试在 contenteditable 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>

<小时/>