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

Question

При использовании contentEditable в Firefox, есть ли способ запретить пользователю вставлять абзацы или разрывы строк, нажимая ввод или Shift + Enter?

Answer 1

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

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

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

Answer 3

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

.your_editable br {
    display: none
}

Answer 4

Если вы используете JQuery Framework, вы можете установить его с помощью метода 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

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

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

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

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

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

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

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

Использовать CSS:

word-break: break-all;

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