Принудительно используйте элемент IE contentEditable для создания разрывов строк по клавише Enter, не прерывая отмену

Question

В Internet Explorer раздел contentEditable DIV создает новый абзац (<p></p>) каждый раз, когда вы нажимаете Enter, в то время как Firefox создает <br/> бирка.

Как уже обсуждалось здесь, можно использовать JavaScript для перехвата нажатия клавиши Enter и использовать range.pasteHTML для создания <br/> вместо этого.Но выполнение этого нарушает работу меню Отмены;как только вы нажмете Enter, вы больше не сможете отменить действие после этого момента.

Как я могу заставить элемент contentEditable создавать разрывы одной строки при вводе без прерывания отмены?

Answer 1

Не точное решение, а другой обходной путь. Если вы используете разметку:

<div contenteditable="true">
<div>
content
</div>
<div>

Затем нажатие войти Создаст новый div теги вместо p теги.

Answer 2

Удерживайте сдвиг, когда вы нажимаете Enter для перерывов, не удерживайте его для полных абзацев. Такое поведение одинаково по умолчанию в Firefox, учитывая довольную область, содержащую абзац: т.е.

<div contenteditable="true">
    <p>If you are typing here</p>
<div>

Answer 3

Предположительно, вы собираетесь опубликовать редактируемый контент обратно на сервер.Следовательно, вас не должно особо волновать, есть ли у вас теги абзаца или разрыва, пока пользователь редактирует, потому что вы можете проанализировать HTML перед отправкой (или на сервере, если хотите) и заменить экземпляры абзацев разрывами.Это сохраняет очередь ОТМЕНЫ в рабочем состоянии для пользователя, но позволяет вам использовать ваш HTML настолько чистым, насколько вы этого хотите.

Далее я предполагаю, что вы будете точно знать, какие элементы DIV будут доступны для редактирования.Перед отправкой формы вы можете запустить каждый раздел contentEditable div с помощью функции, подобной этой:

function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<\/p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}

И вы вызываете это в цикле (который выполняет итерацию по всем редактируемым разделам, используя массив, который я буду называть ceDivs), вот так:

ceDivs[i].contentEditable = false; // to make sure IE doesn't try to coerce the contents again

а потом:

ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);

Улучшением этого (особенно если вы не хотите делать это прямо во время отправки) может быть очистка содержимого каждого такого div в любое другое удобное для вас время (onblur, что угодно) и присвоение содержимого каждого ceDiv его собственному невидимому элементу формы для последующей отправки.Используемый в сочетании с вашим собственным предложением CSS выше, это может сработать для вас.Это не сохраняет ваши буквальные требования к письму (т. Е. он не получает Javascript, чтобы заставить IE вести себя иначе, чем это было закодировано под обложками для поведения), но для всех практических целей эффект тот же.Пользователи получают то, что они хотят, и вы получаете то, что хотите.

Пока вы этим занимаетесь, вы также можете захотеть очистить пробелы и в IE.Если пользователь вводит несколько пробелов (как некоторые все еще делают после точек), IE вставляет не [пробел] [space], а [space] , начальный символ пробела (String.fromCharCode(32)) плюс столько же  сущности, оставшиеся в пробеле, запускаются.

Answer 4

Использовать <BR> вместо <P> (Протестировано в IE9. Может nbsp; необходим в более старых версиях после <BR> (pasteHTML("<br>&nbsp;")) )

Используйте его на мероприятии Keydown:

if (e.keyCode == 13) {
 var range = document.selection.createRange();
 range.pasteHTML("<br> ");
 range.moveStart("character", 0);
 range.moveEnd("character", -1);
 range.select();
 return false;
}

Answer 5

Это может быть невозможно получить это правильно. Однако можно сделать <p> теги Смотреть Как разрывы с одной линией, удалив встроенный край вокруг тегов абзаца, используя CSS:

p { margin: 0; }

В этом подходе есть недостаток: если пользователю необходимо скопировать/вставить текст в элемент довольных, текст может показаться однократным в элементе, но вдвое расположенный вне элемента.

Хуже того, по крайней мере, в некоторых случаях, т.е. автоматически обнаружит разрывы с двойной линией во время пасты, заменив их на <p> теги; Это испортит форматирование вставленного текста.

Answer 6

Т.е. связывает текстовый узел с <p> отметьте Войти нажатие клавиши. Чтобы добиться перерыва в линии Сдвиг+Войти. Анкет Firefox добавляет <br> отметьте Войти нажатие клавиши. Чтобы сделать поведение общим для обоих браузеров, вы можете сделать следующее:

Предположим, что следующая разметка:

<div id="editableDiv" contentEditable="true"></div>

JavaScript [предположим, что код ниже находится в закрытии функции, чтобы вы не раздували страницу глобалами]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $('#editableDiv').live('keydown', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live('keyup', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live('keypress', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             // Insert a PARAGRAPH in Firefox instead of a BR
             // Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

Примечание: Этот сценарий до jQuery <1,9 для использования устаревшего $.browser

Answer 7

Рассмотрим использование <span contenteditable="true"></span> При использовании Internet Explorer. Возможно, вы не захотите делать это с Chrome, потому что фокус выглядит смешно. Вы, вероятно, захотите внедрить свой собственный onfocus а также onblur код.