Показать сообщение отдельно
  #2 (permalink)  
Старый 12.02.2024, 12:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

ekad,
<!DOCTYPE HTML>
<html>

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

    </style>
</head>

<body>
    <output id="out"></output>

    <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 = () => {
            edit.querySelectorAll('.active').forEach(div => div_active === div || div.classList.remove('active'));
            document.querySelectorAll('#pt_text > div').forEach((div, i) => div.id = `n${++i}`);
            out.value = div_active ? `Курсор в ${div_active.id}` : ``;
        };
        deactivate();
        document.addEventListener('selectionchange', () => {
            if (document.activeElement === edit) {
                let el = window.getSelection().focusNode;
                if (el.nodeType === 3) el = el.parentNode;
                div_active = el;
                deactivate();
                div_active.classList.add('active');
            }
        });
        edit.addEventListener('focusout', ()=>{div_active=null,deactivate()})
        edit.addEventListener('keyup', deactivate)
    </script>
</body>

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