防止 contentEditable 中的換行/段落中斷

Question

在 Firefox 中使用 contentEditable 時，有沒有辦法防止用戶通過按 Enter 或 shift+enter 插入段落或換行符？

Answer 1

您可以將事件處理程序附加到 contentEditable 字段的 keydown 或 keypress 事件，並在鍵碼將自身標識為 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

更新，因為不推薦使用keypress ：

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

Answer 3

添加以下 CSS 規則以隱藏換行符。 這只是一個樣式設置，您應該添加一些事件處理程序以防止插入換行符：

.your_editable br {
    display: none
}

Answer 4

除了添加換行符之外，瀏覽器還會添加其他標簽和樣式（當您粘貼文本時，瀏覽器還會附加您粘貼的文本樣式）。

下面的代碼涵蓋了所有內容。

• 當您按 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 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

如果您使用的是 JQuery 框架，您可以使用on方法設置它，即使最近添加了這個，也可以讓您在所有元素上擁有所需的行為。

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

Answer 7

添加：

display: flex;

關於 contenteditable html 元素

Answer 8

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

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

Answer 9

$("#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 10

我來到這里尋找相同的答案，並驚訝地發現這是一個相當簡單的解決方案，使用Event.preventDefault()真實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 11

使用 CSS：

word-break: break-all;

對我來說，它奏效了！