我有一个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
作为行号,如下所示:
现在,我希望每当有人按下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方法。
答案 0 :(得分:1)
模拟点击和击键是considered a security risk。根据{{3}}:
“大多数不受信任的事件都不会触发其默认操作...”
相反,您可以使用W3C UI Events Working Draft和selections来操纵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)
您是否尝试过每个空格插入一个
而不是多个空字符?
在HTML中,除非您使用
,否则不会一起显示多个空白。