Чтобы добавить `id` к активному `div` при вставке курсора внутри `contenteditable="true"` и изменять `id` у `div` при вводе текста и активации курсора, вы можете использовать обработчики событий JavaScript.
Вот пример кода, который делает следующее:
- При фокусировке на `div` с `contenteditable`, присваивает ему id "active".
- Удаляет id "active" у всех других `div` с `contenteditable`.
- Отслеживает нажатие клавиши. Если это Enter, то перемещает курсор в следующий `div` и изменяет `id`.
HTML:
```html
<div id="editable" contenteditable="true">Это редактируемый текст. Сюда можно вставить курсор.</div>
<div contenteditable="true">Еще один редактируемый блок.</div>
<div contenteditable="true">И еще один редактируемый блок.</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Функция для установки активного ID.
function setActive(element) {
// Удаление активного ID у всех contenteditable элементов.
document.querySelectorAll('[contenteditable="true"]').forEach(div => {
div.removeAttribute('id');
});
// Добавление активного ID к текущему элементу.
element.id = 'active';
}
// Функция для обработки события нажатия клавиши.
function checkEnterKey(e) {
if (e.key === 'Enter') {
e.preventDefault(); // Предотвращение нажатия Enter.
const nextElement = document.getElementById('active').nextElementSibling;
if (nextElement && nextElement.isContentEditable) {
// Если есть следующий contenteditable элемент, перевести на него фокус.
nextElement.focus();
setActive(nextElement);
}
}
}
// Добавление обработчика события "focus" для всех contenteditable элементов.
document.querySelectorAll('[contenteditable="true"]').forEach(div => {
div.addEventListener('focus', function() {
setActive(div);
});
div.addEventListener('keydown', checkEnterKey);
});
});
</script>
```
Обратите внимание, что в этом коде используется `document.querySelectorAll` для выбора всех элементов, для которых `contenteditable="true"`, и `addEventListener` для назначения функций обработки фокусировки и клавиатурных событий.
Для корректной работы перехода по Enter к следующему `div`, используется функция `checkEnterKey`, которая ищет следующий элемент в DOM и устанавливает на него фокус, если элемент существует и он допускает редактирование. Если такого элемента нет, фокус не изменяется.
Пожалуйста, имейте в виду, что такое поведение может не соответствовать ожиданиям пользователей при работе с клавишой Enter, так как по умолчанию она создает новую строку внутри `contenteditable` элемента. Это поведение будет переопределено данным кодом.