Javascript 防止内容编辑中的换行/段落

在Firefox中使用contentEditable时，是否有办法通过按enter键或shift+enter键防止用户插入段落或换行符？

您可以将事件处理程序附加到contentEditable字段的keydown或keypress事件，并在keycode将自身标识为enter（或shift+enter）时取消该事件

当焦点位于contentEditable字段时，这将完全禁用enter/shift+enter

如果使用jQuery，则类似于：

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

…这将返回false并在enter时取消按键事件

$("#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;
    }
}();    

---

如果您使用的是jqueryframework，那么可以使用on方法对其进行设置，这将使您在所有元素上都具有所需的行为，即使最近添加了这个元素

$(document).on('keypress', '.YourClass', function(e){
    return e.which != 13; 
});   

---

另一个选项是允许输入打断，但在模糊时将其删除。这具有处理粘贴内容的优势。你的用户要么喜欢它，要么讨厌它（取决于你的用户）

然后，在html中：

<span onblur="handle_blur(event)" contenteditable>editable text</span>

可编辑文本

添加以下CSS规则以隐藏换行符。这只是一个样式设置，您应该添加一些事件处理程序以防止插入换行符：

.your_editable br {
    display: none
}

---

如果要针对所有contentEditable字段，请使用

$('[contenteditable]').keypress(function(e){ return e.which != 13; });

---

这在Vanilla JS中是可能的，需要付出同样的努力：

document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
    if (evt.which === 13) {
        evt.preventDefault();
    }
});

对于最简单的事情，不应该使用jQuery。此外，您可能希望使用“key”而不是“which”：

更新，因为

keypress

已被弃用：

document.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
    if (evt.keyCode === 13) {
        evt.preventDefault();
    }
});

---

除了添加换行符外，浏览器还会添加其他标记和样式（粘贴文本时，浏览器还会附加粘贴的文本样式）

下面的代码涵盖了这一切

• 按enter键时，不会添加换行符
• 粘贴文本时，浏览器添加的所有元素都将从文本中剥离

  $('[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;
  });
  

使用CSS：

word-break: break-all;

---

对我来说，成功了

我来这里寻找同样的答案，并惊讶地发现这是一个相当简单的解决方案，使用了久经考验的正确答案

const input=document.getElementById（'input'）；
input.addEventListener（'keypress'，（e）=>{
如果（e.which==13）e.preventDefault（）；
});

您可以编辑我，只需单击我并开始键入。
但是，不能通过按enter键添加任何换行符。
添加：

在contenteditable html元素上
请注意，将带换行符的文本复制粘贴到contenteditable区域时，这将不起作用。不包括粘贴（从剪贴板）或删除内容的情况。处理页面上的多个
contenteditable
元素将非常有用，但不仅仅是oneChrome也会插入一些
，因此可能会在这之前添加
。您的_editable*{display:inline}
。我同意，而且FWIW我在提出这个问题的项目中没有使用JQuery。让我有点恼火的是，JavaScript上的答案通常都假设每个人都使用JQuery，但Oto的初学者极有可能使用JQuery，而其他人都能够将答案翻译成他们喜欢的库，或者没有：）。我确实认为初学者总是试图将JQuery用于所有事情是一个大问题。他们甚至不再真正学习vanilla js了。现在
keyCode
也被弃用，所以使用
evt.key==“Enter”
。这里不能说向后兼容。在jquery风格中：$（“）.keypress（函数（e）{if（e.which==13）e.preventDefault（）；}）；有一个输入错误：evt.preventDefault应该是event.preventDefault！此外，lambda语法并不适用于所有浏览器。这段代码对我有用：name.addEventListener（'keydown'，function（event）{if（event.keyCode==13）{event.preventDefault（）；}}）；来自审查队列：我可以请求您在源代码周围添加一些上下文吗。只有代码的答案很难理解。如果你能在你的帖子中添加更多的信息，这将有助于提问者和未来的读者。这正是我的答案，比你的答案早3年；）啊，就是这样，不知道我当时为什么回答这个问题，也许没有一个公认的答案，我也没有看到你的回答；然而，有一个关键的区别，我将元素分配给常量，以使代码更具可读性#Mindblowing请添加一个适当的解释，说明您的解决方案如何解决这个问题。简单但完美！
word-break: break-all;

display: flex;