Как добавить атрибуты активному 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,
<!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>
|
Спасибо ВАМ добрый человек. Низкий поклон.
Можно ли немного еще дополнить нужно к каждому новому созданному div добавить id="n1" где цифра это следующее число после последнего например <div id="pt_text" contenteditable="true"> <div id="n1"></div> <div id="n3"></div> <div id="n2"></div> </div> |
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>
|
Цитата:
<!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>
|
Спасибо великий! Работаем дальше.
|
| Часовой пояс GMT +3, время: 19:31. |