我有一个contenteditable元素，每当我输入一些东西并点击ENTER它时，它就会创建一个新元素并将<div>新行文本放在那里。我有点不喜欢这个。
是否有可能防止这种情况发生或至少只是将其替换为<br>?
这是演示http://jsfiddle.net/jDvau/
注意：这在 Firefox 中不是问题。
防止 contenteditable 在 ENTER 上添加 <div> - Chrome
IT技术
javascript
jquery
google-chrome
html
contenteditable
2021-02-06 05:21:06
6个回答
试试这个：
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13) {
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
document.execCommand('insertHTML', false, '<br/>');
// prevent the default behaviour of return key pressed
return false;
}
});
将样式添加display:inline-block;到contenteditable，它不会生成div，p并span在 Chrome 中自动生成。
您只需更改 CSS 即可做到这一点：
div{
background: skyblue;
padding:10px;
display: inline-block;
}
pre{
white-space: pre-wrap;
background: #EEE;
}
这适用于所有主要浏览器（Chrome、Firefox、Safari、Edge）
document.addEventListener('keydown', event => {
if (event.key === 'Enter') {
document.execCommand('insertLineBreak')
event.preventDefault()
}
})<div class="element" contenteditable="true">Sample text</div>
<p class="element" contenteditable="true">Sample text</p>有一个不便之处。完成编辑后，元素<br>内部可能包含结尾。但是如果需要，您可以添加代码来减少它。
检查此答案以删除尾随<br> https://stackoverflow.com/a/61237737/670839
document.execCommand('defaultParagraphSeparator', false, 'p');
它覆盖了默认行为，改为使用段落。
在 chrome 上，输入的默认行为是：
<div>
<br>
</div>
有了那个命令，它会是
<p>
<br>
</p>
现在它更线性了，只要<br>你需要它就很容易拥有。