CODEWITHSUNDEEP
jqueryhtml
rolling stone
rolling stone

Reputation: 13016

How to Set Focus on Input Field using JQuery

Given the following HTML structure:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

which will be repeated several times on the page, how do I set the focus on the input field in the .bottom div when a user clicks on the link in the .top div?

I am currently making the .bottom div appear successfully on click using the JQuery code below, but can't seem to figure out how to set focus on the input field at the same time.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

Thanks!

Upvotes: 133

Views: 353481

Answers (5)

Theodore R. Smith
Theodore R. Smith

Reputation: 23231

Every single one of these answers is now antiquated, as $(selector).focus() has been deprecrated as of jQuery v3.3 (18 January 2018).

The only official answer now is:

$('input').trigger('focus');

Upvotes: 6

Jean G.T
Jean G.T

Reputation: 1

//$GLOBALS['sitename'] is our domain site URL
//$_GET['s'] is the search parameter of our search, and we want to highlight that term searched...    
jQuery(document).ready(function($){  
        let loc=location.href;
        switch(loc) 
        {

    case "<?php echo $GLOBALS['sitename'] ?>?s=<?php echo $_GET['s'] ?>":       
        {       
        let searchf= $("form.search-form").find("input[type='search']:first");
//searchf.val('').focus();      
//empty the value to allow a new search and focus on the field....this works but better to highlight the searched term to allow the user to decide if want to type in something else or just hit again search. In case we want to empty the searched term 
           setTimeout(function (){
           searchf.delay(1000).focus().select(); 
           }, 1000);    
        break;
//.... end of relevant code 
        }

Upvotes: 2

Kevin Buchs
Kevin Buchs

Reputation: 2862

If the input happens to be in a bootstrap modal dialog, the answer is different. Copying from How to Set focus to first text input in a bootstrap modal after shown this is what is required:

$('#myModal').on('shown.bs.modal', function () {
  $('#textareaID').focus();
})

Upvotes: 29

MKaama
MKaama

Reputation: 1919

Justin's answer did not work for me (Chromium 18, Firefox 43.0.1). jQuery's .focus() creates visual highlight, but text cursor does not appear in the field (jquery 3.1.0).

Inspired by https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , I added autofocus attribute to the input field and voila!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}

Upvotes: 8

Justin Ethier
Justin Ethier

Reputation: 134167

Try this, to set the focus to the first input field:

$(this).parent().siblings('div.bottom').find("input.post").focus();

Upvotes: 161

Related Questions