Question

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

Answer 1

您可以将事件处理程序附加到contentEditable字段的keydown或keypress事件，如果keycode将自己标识为enter（或shift + enter），则取消该事件。

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

如果使用jQuery，比如：

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

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

Answer 2

Vanilla JS可以做同样的努力：

document.getElementById('idContentEditable').addEventListener('keypress', function(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;
});

Click here for a live example

Answer 7

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

Answer 8

如果您想定位所有contentEditable字段，请使用

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

Answer 9

我来到这里是为了寻找相同的答案，但我惊讶地发现它是一个相当简单的解决方案，使用了久经考验的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>

Answer 10

添加：

display: flex;

在可编辑HTML元素上

Answer 11

使用CSS：

word-break: break-all;

对我来说，它起作用了！

防止contentEditable中的行/段落中断

11 个答案: