插入4个空格而不是制表符

时间:2018-08-22 19:35:48

标签: javascript html

我有一个contenteditable div,其中有div个,像这样:

<div id="wrapper" contenteditable=true onkeydown="preventTab(event);">
  <div id="line1" class="line"></div>
  <div id="line2" class="line"></div>
  <div id="line3" class="line"></div>
  <div id="line4" class="line"></div>
</div>

对于CSS,使用::before作为行号,如下所示:

example

现在,我希望每当有人按下Tab键时,它都会自动插入四个空格而不是Tab键。我有这个功能,但是在触发事件后它什么也没做。

function preventTab(event) {

    event = event || window.event;

    if (event.keyCode === 9) {

        // for loop, so the user can set the amount of spaces they want.
        for (let i = 0; i < tabSize; i++) {
            let e = new KeyboardEvent("keydown", {
                bubbles: true,
                code: "Space",
                key: " ",
                keyCode: 32
            });

            event.target.dispatchEvent(e);
        }

        event.preventDefault();
    }
}

正如我所说,什么也没有发生(也许是因为isTrusted: false?),也没有引发任何错误。
顺便说一句,我注意到this question具有相同的标题,但这在很大程度上取决于jQuery库,我正在寻找一种纯JavaScript方法。

2 个答案:

答案 0 :(得分:1)

模拟点击和击键是considered a security risk。根据{{​​3}}:

  

“大多数不受信任的事件都不会触发其默认操作...”

相反,您可以使用W3C UI Events Working Draftselections来操纵contenteditable=true元素的内容,就像我在本摘要中演示的那样。

let tabSize = 2;
let spaces = '';
for (i = 0; i < tabSize; i++) {
  spaces += ' ';
}

document.getElementById('editor').addEventListener('keydown', preventTab);

function preventTab(event) {
  if (event.keyCode === 9) {
    event.preventDefault();
    let selection = window.getSelection();
    selection.collapseToStart();
    let range = selection.getRangeAt(0);
    range.insertNode(document.createTextNode(spaces));
    selection.collapseToEnd();
  }
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#editor {
  width: 100%;
  height: 100%;
  font-family: monospace;
  white-space: pre;
}
<div id="editor" contenteditable=true></div>

答案 1 :(得分:0)

您是否尝试过每个空格插入一个&nbsp;而不是多个空字符? 在HTML中,除非您使用&nbsp;,否则不会一起显示多个空白。