Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2024, 18:07
Аспирант
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 35

Как добавить атрибуты активному div внутри contenteditable=true
Здравствуйте.
Подскажите решение пожалуйста по данному вопросу

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

например

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



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

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

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

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

Сообщение от ekad
если всё удалено то есть нет дочерних div то так же нет class="active" ни у одного элемента
забавно)))
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2024, 19:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

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>
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2024, 05:29
Аспирант
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 35

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

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

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

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

например

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

Последний раз редактировалось ekad, 12.02.2024 в 10:04.
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2024, 10:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Сообщение от 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>
Ответить с цитированием
  #7 (permalink)  
Старый 12.02.2024, 11:39
Аспирант
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 35

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать margin, у кучи div pokk (X)HTML/CSS 2 21.09.2018 11:13
Как повесить событие на DIV внутри подгружаемой PHP страницы. Viktorian Events/DOM/Window 4 20.01.2018 22:06
Как обновить содержимое div (или какую функцию вызвать)? unity555 Events/DOM/Window 3 19.12.2017 16:38
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как получить значение ячейки таблицы внутри блока div, в итерации .each() Sanu0074 jQuery 1 21.01.2014 19:32