Question

我有响应式设计，带有填充容器的输入。问题是，当用户点击填充区域时，输入不会被聚焦。

在jQuery中，工作代码是：

$('.wrap').on('click', function (e) {
    $(this).find('input').focus();
});

但似乎无法在JS中使用它：

var elm_rows = document.getElementsByClassName("wrap");
elm_rows.addEventListener("click", function (e) {
    e.getElementsByTagName("input").focus();
});

https://jsfiddle.net/2f9sq3tf/

Answer 1

尝试以阵列形式访问每个`your_counter` int(11) NOT NULL AUTO_INCREMENT函数。

示例：

getElementsBy

要解决剩下的问题，只需将其包装在如下的循环中：

var elm_rows = document.getElementsByClassName("wrap")[0];
elm_rows.addEventListener("click", function (e) {
    this.getElementsByTagName("input")[0].focus();
});

可能会更好，但这有效。

Answer 2

这应该有效：

let wrap = document.querySelectorAll('.wrap');
wrap.forEach((el) => {
    el.addEventListener('click', (e) => {
      // whatever you need to do goes here
    });
});

Answer 3

今天你可以使用querySelector来查找DOM上的元素（以及一些NODE中的元素）。

示例：

var els = document.querySelectorAll('.wrap');
for(var i = 0; i < els.length; i++){
  els[i].addEventListener('click',function(ev){
    var input = ev.target.querySelector('input');
    if(input) input.focus();
  });
}

if是必需的，因为使用该代码，如果单击input节点，该事件将传播到.wrap元素，并且您的回调也将执行，但是{{ 1}}将是ev.target节点，查询将返回input。

Answer 4

var elm_rows = document.getElementsByClassName("wrap");
elm_rows[0].addEventListener("click", function (e) {
  e.currentTarget.children[0].focus();
});

.wrap {border: 3px solid blue; padding: 15px;}
input {width: 100%;}

<div class="wrap">
  <input type="text" name="" value="" />
</div>

纯JS检测点击包装并专注于内部输入

4 个答案: