在 Firefox 中使用 contentEditable 时，有没有办法阻止用户通过按 Enter 或 Shift+Enter 插入段落或换行符？
您可以将事件处理程序附加到 contentEditable 字段的 keydown 或 keypress 事件，并在键码将自身标识为 Enter（或 Shift+Enter）时取消该事件。
当焦点位于 contentEditable 字段时，这将完全禁用 Enter/Shift+Enter。
如果使用 jQuery，类似：
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
...这将返回 false 并取消输入时的按键事件。
这可以通过 Vanilla JS 实现，只需付出同样的努力：
document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
if (evt.which === 13) {
evt.preventDefault();
}
});
你不应该使用 jQuery 来做最简单的事情。另外，您可能想使用“key”而不是“which”：https://developer.mozilla.org/en-US/docs/Web/Events/keypress
更新，因为
keypressdocument.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
if (evt.keyCode === 13) {
evt.preventDefault();
}
});
将以下 CSS 规则添加到 隐藏换行符。这只是一个样式设置，您应该添加一些事件处理程序来防止插入换行符：
.your_editable br {
display: none
}
除了添加换行符之外，浏览器还会添加其他标签和样式（当您粘贴文本时，浏览器还会附加您粘贴的文本样式）。
下面的代码涵盖了所有内容。
粘贴文本时，浏览器添加的所有元素都会从文本中删除。
$('[contenteditable]').on('paste', function(e) {
//strips elements added to the editable tag when pasting
var $self = $(this);
setTimeout(function() {$self.html($self.text());}, 0);
}).on('keypress', function(e) {
//ignores enter key
return e.which != 13;
});
另一个选项是允许输入中断，但在模糊时将其删除。这具有处理粘贴内容的优点。您的用户会喜欢它或讨厌它（取决于您的用户）。
function handle_blur(evt){
var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}
然后，在 html 中：
<span onblur="handle_blur(event)" contenteditable>editable text</span>
如果您使用 JQuery 框架，您可以使用 on 方法设置它，这将使您在所有元素上拥有所需的行为，即使这个元素是最近添加的。
$(document).on('keypress', '.YourClass', function(e){
return e.which != 13;
});
添加：
display: flex;
在可内容编辑的 html 元素上
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
Kamens 提出的解决方案在 Opera 中不起作用，您应该将事件附加到文档中。
/**
* Pass false to enable
*/
var disableEnterKey = function(){
var disabled = false;
// Keypress event doesn't get fired when assigned to element in Opera
$(document).keypress(function(e){
if (disabled) return e.which != 13;
});
return function(flag){
disabled = (flag !== undefined) ? flag : true;
}
}();
如果您想定位所有内容可编辑字段，请使用
$('[contenteditable]').keypress(function(e){ return e.which != 13; });
我来这里寻找相同的答案，并惊讶地发现这是一个相当简单的解决方案，使用经过验证的真实
Event.preventDefault()const input = document.getElementById('input');
input.addEventListener('keypress', (e) => {
if (e.which === 13) e.preventDefault();
});<div contenteditable="true" id="input">
You can edit me, just click on me and start typing.
However, you can't add any line breaks by pressing enter.
</div>使用
beforeinputinputTypeinsertParagraphinsertLineBreakevent.preventDefault() 取消该事件event.stopPropagation()
当您按
<html>
<body>
<p>Write in the contentEditable div below!</p>
<div contentEditable="true" style="width:100%;height:200px;border:1px solid black;"></div>
<script>
document.addEventListener('beforeinput', event => {
const {
dataTransfer,
inputType,
isComposing,
data,
} = event;
if (dataTransfer) {
console.log('dataTransfer.getData(text/html) ===', printR(dataTransfer.getData('text/html')));
console.log('dataTransfer.getData(text/plain) ===', printR(dataTransfer.getData('text/plain')));
}
const convertToRange = staticRange => {
if (staticRange instanceof StaticRange) {
const {
startContainer, startOffset,
endContainer, endOffset,
} = staticRange;
const range = document.createRange();
range.setStart(startContainer, startOffset);
range.setEnd(endContainer, endOffset);
return range;
}
};
// Get the static ranges that will be affected by a change to the DOM if the input event is not canceled
const ranges = event.getTargetRanges?.() || [];
ranges.forEach(staticRange => {
const range = convertToRange(staticRange);
console.log(`Range text content: "${range}"`);
});
console.log('ranges.length ==', ranges.length);
console.log('The "inputbefore" event was detected! event ==', {
dataTransfer,
inputType,
isComposing,
data,
});
if (['insertParagraph', 'insertLineBreak'].includes(inputType)) {
console.log('CANCELING event with inputType ==', inputType);
event.preventDefault();
event.stopPropagation();
}
});
</script>
</body>
</html>
（或
EnterShiftEnter<div contentEditable="true">
对我来说，它有效！