CODEWITHSUNDEEP
javascripthtmlcss
user2454060
user2454060

Reputation: 91

Write in a form by clicking on a button

I have a button that when clicked reveals a form. The user then has to click the form to begin typing.

I would like to make it so that when the user clicks the "click here" button the form appears and text input is already activated, so that the user can type in the form without having to actually click on the form.

Is it possible to have a button activate text input on a form?

$("#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>

Upvotes: 0

Views: 343

Answers (2)

Kartik Prasad
Kartik Prasad

Reputation: 740

Using the focus method to change the cursor focus, this solution will wait for the animation to complete then have the focus change.

$("#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>

Upvotes: 1

shashanka n
shashanka n

Reputation: 2598

Definitely possible. You are looking for the .focus() method on the textbox. I have included it in my answer below:

$("#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>

Upvotes: 2

Related Questions