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

Ответ 1

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

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

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

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

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

Ответ 2

Это возможно с Vanilla JS, с тем же усилием:

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

Вы не должны использовать jQuery для самых простых вещей. Кроме того, вы можете использовать "ключ" вместо "which": https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Ответ 3

Добавьте следующее правило CSS, чтобы скрыть разрывы строк. Это только параметр стиля, вы должны добавить некоторые обработчики событий, чтобы предотвратить вставку разрывов строк:

.your_editable br {
    display: none
}

Ответ 4

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

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

Ответ 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>

Ответ 6

Помимо добавления разрывов строк, браузер добавляет дополнительные теги и стили (когда вы вставляете текст, браузер также добавляет ваш стиль вставленного текста).

Код ниже охватывает все это.

• Когда вы нажимаете ввод, разрывы строк не добавляются.

• При вставке текста все элементы, добавленные браузером, удаляются из текста.

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

Нажмите здесь для живого примера

Ответ 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;
    }
}();    

Ответ 8

Если вы хотите настроить таргетинг на все поля contentEditable, используйте

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

Ответ 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>

Ответ 10

Используйте CSS:

word-break: break-all;

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