通过单击按钮在表单中书写

Question

我有一个按钮，点击时会显示一个表单。然后，用户必须单击表单才能开始键入。

我想这样做，当用户单击"单击此处"按钮时，会出现表单并且文本输入已被激活，以便用户可以键入表单而无需实际单击表单。

是否可以让按钮激活表单上的文本输入？

$("#button1").click(function(){
	$(".form").show();
});

.form {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<input id="form1" type="text" placeholder="type here"/>
</div>
<button id="button1">click here</button>

Answer 1

绝对有可能。您正在文本框中查找.focus()方法。我已将其包含在下面的答案中：

$("#button1").click(function(){
	$(".form").show();
$("#form1").focus(); // IMPORTANT
});

.form {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<input id="form1" type="text" placeholder="type here"/>
</div>
<button id="button1">click here</button>

Answer 2

使用 focus 方法更改光标焦点，此解决方案将等待动画完成，然后更改焦点。

$("#button1").click(function(){
$(".form").show(function() {
$("#form1").focus();
});
});

.form {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<input id="form1" type="text" placeholder="type here"/>
</div>
<button id="button1">click here</button>