Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2021, 17:31
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Проблема с contenteditable
Ребятушки, прошу прощения, если тема не в своем разделе.

Подскажите, как пофиксить такой недуг:

Существует такая конструкция:
<article id="article" contenteditable="true">
<p class="paragraph">some..</p>
</article>


Когда мы внутри артикла жмякаем Enter, то создается новый
<p></p>
и курсор автоматически ставится внутрь него. Это хорошо.

Когда же мы удаляем содержимое, нажимая Backspace, то удаляется текст и затем пустой тег. Как сделать так, чтобы не удалялся последний
<p></p>
? Либо если удалился ,то автоматически создавался и каретка ставилась внутрь него. А то получается, что тег стирается и мы просто пишем внутри артикла, а не внутри параграфа.

Я пробовал такое
var elem = $('article#article').children().toArray();
	console.log(elem);
	if (elem.length <= 1)
	{
		$('article#article').append('<p class="paragraph"> </p>');
        }


Как бы и работает, но не работает. Помогите, пожалуйста.

Надеюсь понятно объяснил ))
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2021, 17:54
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Попробуйте так:
$('#article').keyup(function () {
    if (this.querySelector('p')) return;

    $(this).append('<p class="paragraph"></p>');
});


Как курсор перенести внутрь параграфа - не знаю.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2021, 17:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

shareware,
https://javascript.ru/forum/dom-wind...teditable.html
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2021, 18:03
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от рони Посмотреть сообщение
shareware,
https://javascript.ru/forum/dom-wind...teditable.html
Это не решает проблемы с удалением последнего параграфа..даже в тех примерах, если нажать backspace то он просто удалится и будешь писать не в параграфе, а внутри contenteditable
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2021, 18:11
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сообщение от shareware
Это не решает проблемы с удалением последнего параграфа
Посмотрите на мой код, выясните чего не хватает. Ознакомьтесь с примером рони и дополните мой вариант.

Получится что-то такое: https://jsfiddle.net/a5epzt70/
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2021, 18:12
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Пробовал так..проблема в том, что если зажать backspace и начать писать, то это сломается
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2021, 18:14
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

shareware, попробуйте слушать другое событие.
Я нашел нужное, которое решает вашу проблему.
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2021, 18:19
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Полагаю, Вы про keydown ? Я попробовал Ваш код, у меня получается все равно так, как и было..ерунда какая то.
https://ibb.co/yPrcp9X
Т.е. параграф создается ,но текст все равно пишется вне него самого
Ответить с цитированием
  #9 (permalink)  
Старый 12.01.2021, 18:22
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сообщение от shareware
Полагаю, Вы про keydown ?
Да, про него.

Сообщение от shareware
Я попробовал Ваш код, у меня получается все равно так, как и было
А вы тему, ссылку на которую рони предоставил читали?
В моем примере далеко не последнюю роль играют стили элементов.
Ответить с цитированием
  #10 (permalink)  
Старый 12.01.2021, 18:26
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Конечно прочитал, что уж Вы так )

Стили у меня прописаны..сейчас попробовал поставить <br> внутрь создаваемого параграфа и вот только так начало работать..ни с чем другим почему то не хотело.

Так или иначе спасибо большое за помощь )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47