Показать сообщение отдельно
  #3 (permalink)  
Старый 26.01.2022, 07:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

insert after by enter
webgraph,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
        [contenteditable] {
            height: 50px;
            width: 400px;
            border: 1px solid #000000;
        }
        [contenteditable]:focus {
         outline: none;
         border-color: #FF0000;
        }

  </style>
  <title></title>
</head>
<body>
  <!-- Весь список check-листов -->
  <section id="lists">
    <!-- Первая группа check-листов -->
    <div class="group">
      <div class="list list-container">
        <input type="checkbox">
        <div class="check-text" contenteditable=""></div>
      </div>
      <div class="list list-container">
        <input type="checkbox">
        <div class="check-text" contenteditable=""></div>
      </div>
    </div><!-- Вторая группа check-листов -->
    <div class="group">
      <div class="list list-container">
        <input type="checkbox">
        <div class="check-text" contenteditable=""></div>
      </div>
      <div class="list list-container">
        <input type="checkbox">
        <div class="check-text" contenteditable=""></div>
      </div>
    </div><!-- ... Следующая группа check-листов и т.д. -->
  </section>
  <script>
        //функция, которая создает новый див
        function enterCheck(list) {
            let html = `<div class="list list-container">
        <input type="checkbox">
        <div class="check-text" contenteditable=""><\/div>
        <\/div>`;
            list.insertAdjacentHTML('afterend', html);
            list.nextElementSibling.querySelector('.check-text').focus();
        }
        //собираем массив всех group'ов
        let groups = document.querySelectorAll('.group');
        //перебираем этот массив
        groups.forEach(function(e) {
            //когда в нём нажимаются клавиши
            e.addEventListener('keypress', function(event) {
                let target = event.target;
                //когда нажата Enter
                if (event.key === 'Enter' && (target = target.closest('.check-text'))) {
                    //отменяем стандартное поведение(перенос строки)
                    event.preventDefault();
                    //если текущий блок не пустой, то добавляем новый сразу после него
                    if (target.innerText !== '') {
                        let list = target.closest('.list')
                        enterCheck(list);
                    }
                }
            });
        });
  </script>
</body>
</html>

Последний раз редактировалось рони, 26.01.2022 в 08:03.
Ответить с цитированием