Comment mettre l'accent sur un champ de saisie à l'aide de JQuery

Question

Étant donné la structure HTML suivante :

<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>

qui sera répétée plusieurs fois sur la page, comment puis-je mettre l'accent sur le champ de saisie dans l'élément .bottom lorsqu'un utilisateur clique sur le lien dans la balise .top div ?

Je suis en train de faire le .bottom div apparaissent avec succès au clic en utilisant le code JQuery ci-dessous, mais je n'arrive pas à trouver comment mettre l'accent sur le champ de saisie en même temps.

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

Merci de votre attention !

Answer 1

Essayez ceci, pour mettre l'accent sur le premier champ de saisie :

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

Answer 2

Si l'entrée se trouve dans une boîte de dialogue modale bootstrap, la réponse est différente. La copie de Comment mettre le focus sur la première entrée de texte dans une modale bootstrap après l'affichage c'est ce qui est demandé :

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

Answer 3

La réponse de Justin n'a pas fonctionné pour moi (Chromium 18, Firefox 43.0.1). La fonction de jQuery .focus() crée une surbrillance visuelle, mais le curseur de texte n'apparaît pas dans le champ (jquery 3.1.0).

Inspiré par https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ J'ai ajouté autofocus au champ de saisie et voilà !

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();
}

Answer 4

//$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 
        }