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

ekad,
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        [contenteditable] .active {
            border: 4px red solid;
        }
    </style>
</head>

<body>
    <div id="pt_text" contenteditable="true">
        <div>111</div>
        <div>111</div>
        <div>(тут курсор)</div>
    </div>
    <script>
        let edit = document.querySelector('#pt_text'),
            div_active;
        const deactivate = () => div_active && div_active.classList.remove('active');
        const activate = div => {
            deactivate();
            div_active = div;
            div_active.classList.add('active');
        }
        edit.addEventListener('click', ({
            target
        }) => {
            if (taret = target.closest('#pt_text > div')) activate(target);
        });
        edit.addEventListener('focusout', deactivate)
    </script>
</body>

</html>
Ответить с цитированием