Здравствуйте!
Подскажите, можно ли определить индекс инпута внутри блока в такой ситуации.
Вот див внутри него блоки .test с инпутами:
<div class="wrapTest">
<div class="test">
<input type="text"> <span class="unit">м</span>
<input type="text"> <span class="unit">м</span>
<input type="text"> <span class="unit">м</span>
<input type="text"> <span class="unit">м</span>
</div>
<div class="test">...</div>
<div class="test">...</div>
</div>
Рядом стоят ещё такие же блоки, только в них может быть другое кол-во инпутов (поставил троеточие).
Так как эти блоки генерируются через class, ловлю событие focus на всплытие:
document.querySelector('.wrapTest').addEventListener('focus', function(e) {
let el = e.target;
if (el.tagName == 'INPUT') {
/*let inputs = el.parentNode.querySelectorAll('input');
console.log(inputs);*/
}
}, true);
Подскажите, я могу скриптом определить в каком инпуте произошло событие focus (в первом, втором, третьем или четвёртом)?
Пока писал пост,
нашёл решение что могу при генерации инпутов
проставлять им name или data атрибуты со значениями индекса (0, 1, 2, 3...) и потом их вытягивать.
В принципе это легко решает мою задачу, но так как учу JS и столкнулся с такой ситуацией, решил не удалять и задать этот вопрос. Вы тут люди высокого уровня и у вас есть чему поучится. Вдруг есть ещё какой способ определить индекс инпута в котором произошло событие.