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

我有一个

contenteditable

div

，里面有

div

s，如下所示：

<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>

正如我所说，实际上什么都没有发生（可能是因为

isTrusted:false

？），也没有抛出错误。

---

顺便说一句，我注意到有相同的标题，但这在很大程度上取决于jQuery库，我正在寻找一种纯JavaScript方法。

模拟点击和击键是非常有用的。根据报告：

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

相反，您可以像我在这个片段中演示的那样，使用和操作

contenteditable=true

元素的内容

让tabSize=2；
让空格=“”；
对于（i=0；i

html，
身体{
身高：100%；
宽度：100%；
保证金：0；
}
#编辑{
宽度：100%；
身高：100%；
字体系列：monospace；
空白：预处理；
}

---

您是否尝试过在每个空格中插入一个

，而不是多个空字符？

---

在HTML中，除非您使用

而不是

\t

，否则不会同时呈现多个空格spaces@IsmaelMiguel

div

没有属性

selectionStart

和

selectionEnd

，因此无法使用：（首先尝试获取选择，看看你能用它做些什么。提交内容后，你是否考虑过这样做？这似乎是一种更简单、更可靠的处理方法。谢谢你的回答！我以为只有

htmltextraelement

有选择属性，我不知道

Window

也有选择属性。Works正如预期的那样！我似乎无法让它完全为我工作，它只会在另一个字符后插入一个空格。我已经对代码进行了一些修改，试图让它工作，但它仍然拒绝。这是我发现的唯一答案，它甚至可以做任何事情。

let node=document.createTextNode（“”）；node.innerHTML=''；range.insertNode（节点）

@vzybly，如果你运行答案中的代码片段，它是否如预期的那样工作？我只在Chrome和Firefox中测试过，但它对我仍然有效。我不确定你引入的哪些条件会使它按照你所描述的方式工作……顺便说一句，你不能像你所描述的那样创建一个包含Htmlenties的文本节点首先，文本节点甚至没有innerHTML设置程序。此外，如果在传递给createTextNode的值中使用实体，则最终将得到纯文本“”作为内容而不是实际的空格字符。发现问题后，div需要

空白：pre；

。我记得以前把它放在某个地方，但它弄乱了整个页面，但只放在该div上解决了问题。希望这对其他人有所帮助，并感谢您的帮助。

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();
    }
}