jquery 单击 div 以在子输入字段中设置光标

Question

我什至不知道这是否可能。

出于样式目的，我有一个带有输入字段的 div。一旦用户单击输入字段周围的 div，我想将光标(闪烁的 |)放在输入字段上(基本上允许用户开始输入)。

这张图片可能会更好地解释我的问题。我将输入字段涂成蓝色以更好地说明问题:

这可能吗？

Answer 1

是的，使用 jQuery 是可能的:

$(".area").click(function() {
  $(this).find("input,textarea").focus();
});

.area {
  padding: 20px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
  <input type="text">
</div>

但是您可能不需要 jQuery。您可以使用 label 标签及其标准行为:

.area {
  padding: 20px;
  background: #ccc;
  display: block;
}

<label class="area" for="name">
  <input type="text" id="name">
</label>