58

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

4

11 回答 11

78

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

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

如果使用 jQuery，类似：

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

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

于 2009-01-09T14:03:48.293 回答
42

使用 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();
    }
});
于 2015-10-20T14:50:55.730 回答
21

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

.your_editable br {
    display: none
}
于 2013-08-25T07:32:59.803 回答
11

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

下面的代码涵盖了所有内容。

  • 当你按下回车时，不会添加换行符。

  • 粘贴文本时，浏览器添加的所有元素都会从文本中删除。

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

单击此处查看实时示例

于 2017-05-24T14:56:57.187 回答
7

另一种选择是允许输入中断但在模糊时将其删除。这具有处理粘贴内容的优势。您的用户会喜欢它或讨厌它（取决于您的用户）。

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>
于 2013-01-10T19:50:33.857 回答
6

如果您使用的是 JQuery 框架，则可以使用on方法对其进行设置，这将使您对所有元素都具有所需的行为，即使最近添加了该元素。

$(document).on('keypress', '.YourClass', function(e){
    return e.which != 13; 
});
于 2012-12-20T15:48:04.700 回答
6

添加：

display: flex;

在 contenteditable html 元素上

于 2020-03-01T06:14:13.933 回答
3 
$("#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;
    }
}();
于 2009-02-26T13:51:34.250 回答
3

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

$('[contenteditable]').keypress(function(e){ return e.which != 13; });
于 2015-07-28T20:13:49.850 回答
2

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

于 2018-11-29T13:17:01.453 回答
-3

使用 CSS：

word-break: break-all;

对我来说，它的工作！

于 2018-08-02T14:32:48.390 回答