时间戳

首页 > 解决方案 > JS输入字段光标焦点，如果它是div中的子元素

javascript - JS输入字段光标焦点，如果它是div中的子元素

问题描述

有更多的父 div 并且每个都有多个子元素，而其中一个子元素是文本类型的输入字段。

父 div 一个接一个地随机显示，我需要 JS 来定位特定的子输入，以便在显示父 div 时将用户的闪烁光标聚焦到子中。

我试过这个，但它不工作。

HTML：

<div class="parent">
 <div>A</div>
 <div>B</div>
 <div>C</div>
 <input>D</input>
</div>
..
<div class="parent">
 <div>A</div>
 <div>B</div>
 <div>C</div>
 <input>D</input>
</div>
..
<div class="parent">
 <div>A</div>
 <div>B</div>
 <div>C</div>
 <input>D</input>
</div>

特定的 JS 行：

$('.parent:eq(' + random + ')').show().focus().select();

整个JS函数：

function show() {
  used_numbers.splice(0, used_numbers.length);
  $('.parent').hide();
  for (var inc = 0; inc < div_number; inc++) {
    var random = get_random_number();
    $('.parent:eq(' + random + ')').show().focus().select();
  }
  $('.parent').delay(9500).fadeOut(500);
}

我似乎无法找到如何将输入定位为子元素并使 JS 将光标聚焦在其上，然后显示所有其他父类 div。有任何想法吗？

谢谢你。

标签： javascriptselectfocus

解决方案

由于您一次只显示 1 个父级，因此您可以只关注父级 div 的子级输入。

您可以显示父级，然后专注于输入。我认为您试图在 1 行代码中做太多事情$('.parent:eq(' + random + ')').show().focus().select();

例如，您可以show()在父级和focus()现在显示的输入上使用。

const div_number = 1;
const get_random_number = () => 0;

function show() {
  //used_numbers.splice(0, used_numbers.length);
  $('.parent').hide();

  for (var inc = 0; inc < div_number; inc++) {
    var random = get_random_number();
    $('.parent:eq(' + random + ')').show();
    $('.parent > input').focus();
  }
  $('.parent').delay(9500).fadeOut(500);
}

show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
 <div>A</div>
 <div>B</div>
 <div>C</div>
 <input>D</input>
</div>

<div class="parent">
 <div>A</div>
 <div>B</div>
 <div>C</div>
 <input>D</input>
</div>

推荐阅读