Предотвращение разрывов строк / абзацев в contentEditable

Вы можете прикрепить обработчик событий к событию нажатия клавиши или нажатия клавиши для поля contentEditable и отменить событие, если код клавиши идентифицирует себя как ввод (или shift + ввод).

Это полностью отключит ввод / сдвиг + ввод, когда фокус находится в поле contentEditable.

Если вы используете jQuery, что-то вроде:

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

... который вернет false и отменит событие нажатия клавиши при входе.

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

Решение, предложенное Каменсом, не работает в 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;
    }
}();    

Если вы используете фреймворк JQuery, вы можете установить его с помощью метода на, который позволит вам иметь желаемое поведение для всех элементов, даже если этот добавлен недавно.

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

другой вариант - разрешить ввод разрывов, но удалить их при размытии. это имеет то преимущество, что имеет дело со вставленным содержимым. ваши пользователи либо полюбят это, либо возненавидят (в зависимости от ваших пользователей).

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>

Добавьте следующее правило 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 для самых простых вещей. Кроме того, вы можете использовать «ключ» вместо «который»: https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Обновление, поскольку 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;

Для меня это сработало!

Я пришел сюда в поисках того же ответа и был удивлен, обнаружив, что это довольно простое решение с использованием проверенного и надежного 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>

Добавлять:

display: flex;

На contenteditable html-элементе