Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблема с contenteditable (https://javascript.ru/forum/dom-window/81678-problema-s-contenteditable.html)

Nexus 12.01.2021 18:29
Цитата:
Сообщение от shareware
сейчас попробовал поставить <br> внутрь создаваемого параграфа и вот только так начало работать
Вы минимальную высоту для него не забыли указать?

<article id="article" contenteditable="true">
    <p class="paragraph">some..</p>
</article>

<style>
    p {
        min-height: 20px;
        background: red; 
        color: white;
    }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
    $('#article').keydown(function () {
        if (this.querySelector('p')) return;

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

shareware 12.01.2021 18:29
Цитата:
Сообщение от Nexus (Сообщение 532620)
Да, про него.


А вы тему, ссылку на которую рони предоставил читали?
В моем примере далеко не последнюю роль играют стили элементов.
Пока не отошли от темы..не знаете, нельзя ли вообще исключить удаление последнего <p> ? Т.к. если мы его добавляем, то каретка дергается, что выглядит некрасиво

shareware 12.01.2021 18:30
Да, указал..но почему то не работало..может быть какая то особенность браузера опера или потусторонние силы )

Nexus 12.01.2021 18:39
Цитата:
Сообщение от shareware
не знаете, нельзя ли вообще исключить удаление последнего <p> ?
 
<article id="article" contenteditable="true">
    <p class="paragraph">some..</p>
</article>

<style>
    p {
        min-height: 20px;
        background: red; 
        color: white;
    }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
  $('#article').keydown(function (e) {
    const paragraphs = this.querySelectorAll('p');
    if (paragraphs.length > 1 || e.originalEvent.code !== 'Backspace') return;

    if (!paragraphs[0].textContent.length) e.preventDefault();
  });
</script>

shareware 12.01.2021 18:44
Огромное спасибо!

рони 12.01.2021 19:35
contenteditable запрет удаления последнего абзаца на js
 
на примере кода от Nexus,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
    p {
        min-height: 20px;
        background: red;
        color: white;
    }
</style>
  <script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#article").addEventListener("keydown", function(event) {
  const paragraphs = this.querySelectorAll('p');
  if(event.code == 'Backspace' && paragraphs.length == 1 && !paragraphs[0].textContent.length) event.preventDefault();
     })
  });
  </script>
</head>
<body>
<article id="article" contenteditable="true">
    <p class="paragraph">some..</p>
</article>
</body>
</html>

shareware 13.01.2021 10:27
И Вам большое спасибо :)


Часовой пояс GMT +3, время: 22:36.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице