Как .focus () a .srcElement / childNode в Javascript

Question

Я пытаюсь .focus () текстовое поле, когда пользователь нажимает на больший div.Входные данные являются дочерними по отношению к div, и я могу найти этот элемент, однако Javascript выдает ошибку при попытке использования функции .focus ().

Я уже пытался напрямую .focus () childNodes, как показано, ноЯ не могу 1) сфокусировать узел и 2) найти входной тег в списке.

function clickables() {
    let clickables = document.getElementsByClassName("clickables")
    for (var i = 0; i < clickables.length; i++) {
        clickables[i].addEventListener("click", function(e) {
            const target = e.srcElement.childNodes;
            target.focus(input); // .getElementsByTagNames isn't working
        }); 
    }
}
clickables();

Ожидаемые результаты состоят в том, что при щелчке на большем элементе div он фокусирует входные данные внутри него, фактический результатjava-скрипт выдает ошибку.

Answer 1

Сначала вы должны использовать inputs.length, а не clickables.length.

Во-вторых, вам нужно выбрать, какого ребенка .focus().

function clickables() {
  let inputs = document.getElementsByClassName("clickables");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("click", function(e) {
      const target = e.srcElement.firstElementChild;
      target.focus();
    }); 
  }
}

clickables();

.clickables {
  background-color: #999;
  padding: 10px;
}

<div class="clickables">
  <input type="text" value="first"> 
  <input type="text" value="second">
  <input type="text" value="third">
</div>

В этом примере я выбираю первый элемент для фокусировки.

UPDATE

Как уже говорилось, вам нужно знать , на какого ребенка вы хотите позвонить .focus().

Допустим, вы используете атрибут autofocus для ребенка, которому хотите получить фокус, тогда вы можете сделать это:

function clickables() {
  let inputs = document.getElementsByClassName("clickables");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("click", function(e) {
      let target = e.srcElement.querySelector('[autofocus]');
      if (!target) {
        target = e.srcElement.firstElementChild;
      }
      target.focus();
    }); 
  }
}

clickables();

.clickables {
  background-color: #999;
  padding: 10px;
}

<div class="clickables">
  <input type="text" value="first"> 
  <input type="text" value="second" autofocus>
  <input type="text" value="third">
</div>
<hr>
<div class="clickables">
  <input type="text" value="first"> 
  <input type="text" value="second">
  <input type="text" value="third" autofocus>
</div>
<hr>
<div class="clickables">
  <input type="text" value="first"> 
  <input type="text" value="second">
  <input type="text" value="third">
</div>

Так как @sean правильно указал, что приведенный выше пример является ошибочным использованием autofocus, вам, вероятно, следует использовать другой атрибут, или здесь есть альтернативный способ сделать то же самое:

function clickables() {
  let inputs = document.getElementsByClassName("clickables");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("click", function(e) {
      let index = Number(e.srcElement.getAttribute('focus')||'1')-1;
      console.log(index)
      let target = e.srcElement.children[index];
      target.focus();
    }); 
  }
}

clickables();

.clickables {
  background-color: #999;
  padding: 10px;
}

<div class="clickables" focus="2">
  <input type="text" value="first"> 
  <input type="text" value="second">
  <input type="text" value="third">
</div>
<hr>
<div class="clickables" focus="3">
  <input type="text" value="first"> 
  <input type="text" value="second">
  <input type="text" value="third">
</div>
<hr>
<div class="clickables">
  <input type="text" value="first"> 
  <input type="text" value="second">
  <input type="text" value="third">
</div>

Я думаю, что атрибут является лучшим решением, поскольку вы можете гарантировать установку .focus для правильного / ожидаемого элемента.

Answer 2

Вы можете попробовать что-то вроде

function clickables() {
let inputs = document.getElementsByClassName("clickables")
for (var i = 0; i < clickables.length; i++) {
    clickables[i].addEventListener("click", function(e) {
        const childElements = e.srcElement.children;
        for (var j = 0; j < childElements.length; j++) {
            childElements[j].focus();
        }
    }); 
}
}
clickables();