CODEWITHSUNDEEP
javascriptjqueryhtml
Saurabh Mittal
Saurabh Mittal

Reputation: 33

Focus on text field each time the editor loads

I am creating a normal chat application having 2 sections ie contacts list in one column and their chats in the other column. On selecting a contact from the list, the chat corresponding to the user gets opened. Now I am having a editor / input field in the chat section which I need to focus when chat section gets loaded and even after I send the message.

document.getElementById("comment").focus();
 <div class="row reply">
   <div class="col-sm-11 col-xs-11 reply-main">
     <textarea class="form-control" rows="1" id="comment" placeholder="Enter any message" ></textarea>
    </div>
    <div class="col-sm-1 col-xs-1 reply-send">
       <a id="send" onclick="saveRecordText();" ><i class="fa fa-save fa-2x" aria-hidden="true"></i></a>
    </div>
   </div>

I need to focus the textarea with id comment using Jquery so that the text area is always active for taking input and I dont need to click it each time for entering an input.

Upvotes: 2

Views: 198

Answers (2)

Shashank
Shashank

Reputation: 2060

Although the code works perfectly through your code using JavaScript, one can do it using jQuery as below:

$(function () {
    $('#comment').focus();
});

Upvotes: 0

tareqanwar
tareqanwar

Reputation: 88

Use jQuery focus function to focus your textarea: https://api.jquery.com/focus/

$(function() {
 // Initial focus
 $('#comment').focus();
 
 // Focus even when focusout
 $('#comment').focusout(function(){
     $('#comment').focus();
 });
});

Also you can add $('#comment').focus(); in your saveRecordText() and chat load function you created. If you don't need focus when user focus out then please remove:

// Focus even when focusout
$('#comment').focusout(function(){
  $('#comment').focus();
});

Upvotes: 1

Related Questions