Нужно получить номер div по счету в котором находится текстовой курсор. В данном примере после нажатия на кнопку в alert отражается номер div
если несколько раз нажать Enter то создаются блоки. и если мышкой кликнуть на конкретный блок то в переменную запишется номер блока
и алертом этот номер можно увидеть
но если если несколько раз нажать Enter, и перемещаться по блокам не кликами а стрелками вверх вниз то в переменную всегда записывается 1
и алертом номер 1 можно увидеть
как перемещение стрелками текстового курсора можно передавать номер блока в переменную currentDivIndex
|
Код:
|
<div id="pt" contenteditable="true" onmousedown="rememberDiv(event)" onkeydown="handleKeyDown(event)">
<div><br></div>
</div>
<div onclick="show()">кнопка</div>
let currentDivIndex = null;
function rememberDiv(event) {
const target = event.target;
const divs = document.getElementById('pt').querySelectorAll('div');
divs.forEach((div, index) => {
if (div === target) {
currentDivIndex = index + 1;
return;
}
});
}
function handleKeyDown(event) {
const key = event.key;
if (key === 'ArrowUp' || key === 'ArrowDown') {
const parentDiv = document.getElementById('pt');
const divs = parentDiv.querySelectorAll('div');
const currentIndex = Array.from(divs).indexOf(document.activeElement.parentElement);
if (key === 'ArrowUp') {
currentDivIndex = Math.max(1, currentIndex);
} else {
currentDivIndex = Math.min(divs.length, currentIndex + 2);
}
}
}
function show() {
if (currentDivIndex !== null) {
alert('Номер по счету div: ' + currentDivIndex);
} else {
alert('Курсор не находится внутри div.');
}
}
|
