Javascript.RU

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

Получить номер блока div в котором текстовый курсор?
Нужно получить номер 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.');
  }
}
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2024, 12:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

ekad,
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        [contenteditable]>div.active {
            border: 4px red solid;
        }
        #out{
            color: #0000CD;
        }

    </style>
</head>

<body>
    <output id="out"></output>

    <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}`);
            out.value = div_active ? `Курсор в ${div_active.id}` : ``;
        };
        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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2024, 13:14
Аспирант
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 35

Благодарю от души. Как же ты невероятно крут!
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2024, 14:37
Аспирант
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 35

я два дня с утра до вечере решал этот вопрос и чат ГПТ использовал, на клаве все кнопки стер.
а ты дал просто супер решение.
Еще раз спасибо.
Не сдержался написать.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
ajaxForm, получить ответ в div xhugo AJAX и COMET 1 30.03.2011 21:09
Как получить размер блока сразу после изменения его содержимого? Cooskon Events/DOM/Window 6 17.09.2010 16:15
получить количество элементов в div woo Общие вопросы Javascript 4 06.06.2010 22:41
получить значение свойства class у div Leax Events/DOM/Window 8 07.02.2010 20:00