Question

我在按下Enter后尝试在可信任的div中格式化文本。问题是没有任何密钥从任何密钥注册，所以这使得它变得不可能。其他事件，例如'click'确实有效，如果我将元素更改为'document'（document.addEventListener() ...），这也会使它工作，但这是一个极端的解决方案。有一个简单的解决方案吗？

window.addEventListener('load', function() {
    var editbox = document.getElementById("editable")
    editbox.addEventListener('keyup', function(e) {
        alert("this should appear");
    });
});

<main contenteditable="true">
    <div class="box" id="editable">
        text
    </div>
</main>

Answer 1

您应该使用contenteditable="true"
有一个名为input的特殊事件。
几乎在所有情况下你都不需要document.getElementById。几乎每个id的元素都有它自己的变量。

＆＃13;

window.addEventListener('load', function() {
    let enterCount = 0;
    editable.addEventListener('input', function(e) {
        console.log ("this should appear");
        if (enterCount < e.target.querySelectorAll('br').length) {    
            console.log ('enter was pressed');
        }
        enterCount = e.target.querySelectorAll('br').length;
    });
});

＆＃13;

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="javascript.js"></script>
    </head>
    <body>
        <main contenteditable="true" id="editable">
            <div class="box" >
                text
            </div>
        </main>
    </body>
</html>

＆＃13;

Answer 2

还有另一种解决方案。您可以只检测一个inputType。

#inputTypePreview {
  margin: 1em 0 0;
}
#divInput, #inputTypePreview {
  border: 1px solid #b1b0b0;
  border-radius: 3px;
  width: 100%;
  resize: none;
}

<div id="divInput" contentEditable="true"></div>
<textarea id="inputTypePreview" disabled></textarea>

data-scroll

contenteditable div上的keyup事件

2 个答案: