防止contentEditable中的行/段落中断

Question

在Firefox中使用contentEditable时,是否可以通过按Enter或shift + enter来阻止用户插入段落或换行符？

Answer 1

您可以将事件处理程序附加到contentEditable字段的keydown或keypress事件,如果keycode将自身标识为enter(或shift + enter),则取消该事件.

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

如果使用jQuery,例如:

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

...将返回false并取消输入时的按键事件.

Answer 2

这可以通过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

Answer 3

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

.your_editable br {
    display: none
}

Answer 4

如果您正在使用JQuery框架,则可以使用on方法设置它,这将使您在所有元素上具有所需的行为,即使最近添加了此元素也是如此.

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

Answer 5

另一种选择是允许输入中断但在模糊时删除它们.这具有处理粘贴内容的优点.您的用户会喜欢它还是讨厌它(取决于您的用户).

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>

Answer 6

除了添加换行符之外,浏览器还会添加其他标签和样式(当您粘贴文本时,浏览器还会附加您的粘贴文本样式).

以下代码涵盖了所有内容.

• 按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;
  });
  

点击此处查看实时示例

Answer 7

添加：

display: flex;

关于 contenteditable html 元素