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>

Answer 2

如果您可以使用JQuery，只需使用简单的.focus（）以下是文档的链接https://api.jquery.com/focus/

如果你把它放在你的加载函数中，它会自动将光标放在输入框中。我建议使用实际ID。

$( "input" ).focus();

Answer 3

如果您不想使用任何Javascript，则可以使用HTML随附的其他选项：

<label for="inputOne"></label>

将其设置为背景样式，将其置于输入下方，如果用户点击标签，则会将输入重点放在for属性

内