У меня есть contenteditable
элемент, и всякий раз, когда я набираю что-то и нажимаю, ENTER
он создает новый <div>
и помещает туда новый текст строки. Мне это немного не нравится.
Можно ли этого предотвратить или хотя бы просто заменить на <br>
?
Вот демо http://jsfiddle.net/jDvau/
Примечание. В firefox это не проблема.
Ответы:
Попробуй это:
Нажмите здесь для демонстрации
источник
Вы можете сделать это, просто изменив CSS:
http://jsfiddle.net/ayiem999/HW43Q/
источник
Добавить стиль
display:inline-block;
вcontenteditable
, он не будет создаватьdiv
,p
иspan
автоматически в Chrome.источник
*[contenteditable="true"]{display: inline-block;}
<p></p>
:(Попробуй это:
http://jsfiddle.net/rooseve/jDvau/3/
источник
input
при нажатии клавиши ВВОД не запускается. Простое решение: добавить что-то вроде$(this).trigger('input')
insertHTML
Решение делает некоторые странные вещи , когда Есть вложенныеcontenteditable
элементы, ваше решение , что обходит , но есть еще несколько вопросов, я добавил его в качестве нового возможного решения.Вместо этого он переопределяет поведение по умолчанию.
В Chrome поведение по умолчанию при вводе:
С этой командой это будет
Теперь, когда он более линейный, его легко получить, только
<br>
если вам нужно.источник
Используйте shift+ enterвместо того, enterчтобы просто вставить один
<br>
тег или обернуть текст<p>
тегами.источник
То,
contenteditable
как вы нажимаете, enterзависит от браузеров, это<div>
происходит в webkit (chrome, safari) и IE.Я боролся с этим несколько месяцев назад и исправил это следующим образом:
Я надеюсь, что это поможет, и извините за мой английский, если он не так понятен, как нужно.
РЕДАКТИРОВАТЬ : Исправление удаленной функции jQuery
jQuery.browser
источник
jQuery.browser
больше не является частью jQuery.navigator.userAgent.indexOf("msie") > 0
иnavigator.userAgent.indexOf("webkit") > 0
if( ( e.keyCode || e.witch ) == 13 ) { ... }
должно бытьif (e.keyCode === 13 || e.which === 13) { ... }
Вы можете иметь отдельные
<p>
теги для каждой строки вместо использования<br>
теги, и получить большую совместимость с браузером прямо из коробки.Для этого нужно поставить
<p>
тег с некоторым текстом по умолчанию внутри contenteditable div.Например, вместо:
Использование:
jsfiddle
Протестировано в Chrome, Firefox и Edge, второй работает одинаково в каждом.
Первый, однако, создает div в Chrome, создает разрывы строк в Firefox, а в Edge создает div, и курсор возвращается в начало текущего div, а не перемещается в следующий.
Протестировано в Chrome, Firefox и Edge.
источник
Мне нравится использовать Mousetrap для работы с горячими клавишами: https://craig.is/killing/mice
Затем я просто перехватываю событие ввода, выполняя команду insertLineBreak :
Он работает с использованием Chrome 75 и следующего редактируемого элемента:
Также можно использовать insertHTML :
источник
добавить предотвращение по умолчанию в div
источник
document.body.div
(вам, вероятно, нужно будет ввести какой-то другой код, чтобы указать, чтобы исправитьdiv
его только общую идею)Я бы использовал стиль (CSS), чтобы исправить проблему.
Firefox действительно добавляет разрыв элемента блока
, тогда как Chrome оборачивает каждый раздел в тег. Ваш css дает divs отступ в 10 пикселей вместе с цветом фона.
В качестве альтернативы вы можете воспроизвести тот же желаемый эффект в jQuery:
Вот вилка вашей скрипки http://jsfiddle.net/R4Jdz/7/
источник
contenteditable
Вы можете обернуть свои абзацы
<p>
тегом, например, он будет вставлен в новую строку вместо div. Пример:<div contenteditable="true"><p>Line</p></div>
после вставки новой строки:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>
источник
inserHTML
Решение команды делает некоторые странные вещи , когда у вас есть вложенныеcontenteditable
элементы.Я взял несколько идей из нескольких ответов здесь, и сейчас это, похоже, соответствует моим потребностям:
источник
Попробуйте использовать ckeditor. Он также обеспечивает форматирование, подобное этому в SOF.
https://github.com/galetahub/ckeditor
источник
Сначала нам нужно захватить каждый ввод ключевого пользователя, чтобы увидеть, нажата ли клавиша ввода, затем мы предотвращаем
<div>
создание и создаем свой собственный<br>
тег.Есть одна проблема: когда мы создаем его, наш курсор остается в той же позиции, поэтому мы используем Selection API, чтобы поместить его в конец.
Не забудьте добавить
<br>
тег в конце вашего текста, потому что, если вы этого не сделаете, первый ввод не приведет к новой строке.скрипка
источник
Это редактор HTML5, управляемый браузером. Вы можете обернуть свой текст
<p>...</p>
, затем всякий раз, когда вы нажимаете ENTER, вы получаете<p></p>
. Кроме того, редактор работает таким образом, что всякий раз, когда вы нажимаете SHIFT + ENTER, он вставляет<br />
.Проверьте это: http://jsfiddle.net/ZQztJ/
источник
Это работает во всех основных браузерах (Chrome, Firefox, Safari, Edge).
Есть одно неудобство. После завершения редактирования элементы могут содержать окончание
<br>
внутри. Но вы можете добавить код, чтобы сократить это, если вам нужно.Отметьте этот ответ, чтобы удалить завершающий
<br>
https://stackoverflow.com/a/61237737/670839источник
Где
this
фактический контекст, что означаетdocument.getElementById('test');
.источник
Другой способ сделать это
http://jsfiddle.net/jDvau/11/
источник
Предотвратить создание нового Div в редактируемом Div для каждой клавиши ввода: Решение, которое я нашел, очень простое:
Это --- содержимое innerHTML предотвращает создание нового Div в редактируемом содержимом Div при каждой клавише ввода.
источник
В черновике редактора W3C есть некоторая информация о добавлении состояний в ContentEditable , а также о том, чтобы запретить браузеру добавлять новый элемент при нажатии клавиши ввода, вы можете использовать
plaintext-only
.источник
Можно полностью предотвратить такое поведение.
Посмотри на эту скрипку
источник