Форум

ekad · #1 (**permalink**) 11.02.2024, 18:07

Здравствуйте.
Подскажите решение пожалуйста по данному вопросу

Как добавить атрибуты активному div (в котором установлен курсор) внутри contenteditable=true

например

<div id="pt_text" contenteditable="true">
<div></div>
<div></div>
<div class="active">(тут курсор)</div>
</div>

и при переходов в другие div соответственно добавлять class в активный, а у предыдущего убирать

если ни один не активный то нет class ни у одного

если всё удалено то есть нет дочерних div то так же нет class="active" ни у одного элемента

рони · #2 (**permalink**) 11.02.2024, 19:02

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

если всё удалено то есть нет дочерних div то так же нет class="active" ни у одного элемента

забавно)))

рони · #3 (**permalink**) 11.02.2024, 19:03

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>

ekad · #4 (**permalink**) 12.02.2024, 05:29

Спасибо ВАМ добрый человек. Низкий поклон.

Можно ли немного еще дополнить

нужно к каждому новому созданному div добавить id="n1"

где цифра это следующее число после последнего

например

<div id="pt_text" contenteditable="true">
<div id="n1"></div>
<div id="n3"></div>
<div id="n2"></div>
</div>

рони · #5 (**permalink**) 12.02.2024, 10:54

ekad,
для стрелочек и прочего,
возможно есть вариант проще ...

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        [contenteditable] > div.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 = () => {
            edit.querySelectorAll('.active').forEach(div => div_active === div || div.classList.remove('active'));
        };

        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>

рони · #6 (**permalink**) 12.02.2024, 10:59

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

к каждому новому созданному div добавить id

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        [contenteditable] > div.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 = () => {
            edit.querySelectorAll('.active').forEach(div => div_active === div || div.classList.remove('active'));
            document.querySelectorAll('#pt_text > div').forEach((div, i) => div.id = `n${++i}`);
        };
        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>

ekad · #7 (**permalink**) 12.02.2024, 11:39

Спасибо великий! Работаем дальше.

Форум

Справочник

Discord чат

Курсы javascript