Форум

Nexus · #11 (**permalink**) 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 (**permalink**) 12.01.2021, 18:29

Сообщение от Nexus

Да, про него.

А вы тему, ссылку на которую рони предоставил читали?
В моем примере далеко не последнюю роль играют стили элементов.

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

shareware · #13 (**permalink**) 12.01.2021, 18:30

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

Nexus · #14 (**permalink**) 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 · #15 (**permalink**) 12.01.2021, 18:44

Огромное спасибо!

рони · #16 (**permalink**) 12.01.2021, 19:35

на примере кода от 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 · #17 (**permalink**) 13.01.2021, 10:27

И Вам большое спасибо

Форум

Справочник

Discord чат

Курсы javascript