【发布时间】：2009-01-08 18:07:36
【问题描述】：
在 Firefox 中使用 contentEditable 时，有没有办法阻止用户通过按 enter 或 shift+enter 来插入段落或换行符？
【问题讨论】：
标签： javascript firefox contenteditable
【发布时间】：2009-01-08 18:07:36
【问题描述】：
您可以将事件处理程序附加到 contentEditable 字段的 keydown 或 keypress 事件，如果 keycode 将自身标识为 enter（或 shift+enter），则取消该事件。
当焦点位于 contentEditable 字段时，这将完全禁用 enter/shift+enter。
如果使用 jQuery，类似：
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
...这将返回 false 并取消输入时的按键事件。
【讨论】：
-
请注意，这在将带有换行符的文本复制粘贴到 contentEditable 区域时不起作用。
-
不包括粘贴（从剪贴板）或删除内容的情况。
-
处理页面上的多个
contenteditable元素会很有用，但不仅仅是一个
使用 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
更新，因为 keypress 已弃用：
document.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
if (evt.keyCode === 13) {
evt.preventDefault();
}
});
【讨论】：
-
我同意，而且我没有在提示这个问题的项目中使用 JQuery。确实让我有点恼火的是，关于 SO 的 JavaScript 答案通常假设每个人都使用 JQuery，但是 OTOH 初学者绝大多数都在使用 JQuery，而其他所有人都能够翻译答案以使用他们喜欢的库或缺少这些库:)。
-
我确实认为初学者总是尝试将 jquery 用于所有事情是一个大问题。他们甚至不再真正学习 vanilla js。
-
现在
keyCode也已被弃用，因此请使用evt.key === "Enter"。不能在这里谈论向后兼容性。 Docs. -
在 jquery 风格中： $(".
").keypress(function(e) { if (e.which === 13) e.preventDefault(); }); -
有一个错字：evt.preventDefault 应该是 event.preventDefault！此外，lambda 语法并不适用于所有浏览器。这段代码对我有用： name.addEventListener( 'keydown', function( event ) { if ( event.keyCode === 13 ) { event.preventDefault(); } } );
将以下 CSS 规则添加到 隐藏 换行符。这只是一个样式设置，您应该添加一些事件处理程序来防止插入换行符：
.your_editable br {
display: none
}
【讨论】：
-
Chrome 也插入了一些
<DIV>s，所以可以在此之前添加.your_editable * { display: inline }。
除了添加换行符，浏览器还会添加额外的标签和样式（当您粘贴文本时，浏览器也会附加您粘贴的文本样式）。
下面的代码涵盖了所有内容。
- 当您按下回车时，不会添加换行符。
-
粘贴文本时，浏览器添加的所有元素都会从文本中删除。
$('[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;
在 contenteditable 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 字段，请使用
$('[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>【讨论】：
-
这正是我的答案，比你早 3 年 ;)
-
啊，原来如此，不知道为什么我当时回答了这个问题，也许它没有被接受的答案，我没有看到你的回复；但是，有一个关键区别，我将元素分配给 const 以使代码更具可读性#mindblowing
使用 CSS：
word-break: break-all;
对我来说，它成功了！
【讨论】：