web-dev-qa-db-fra.com

Fonction JQuery onclick pour focaliser l'entrée

Je veux une fonction JQuery qui signifie que si l'utilisateur clique sur du texte sur la page, il concentre une entrée.

$(document).ready(function(){
$('#header.search span').click(function(){
    $('#header.search input').focus();
});
});

Cela n'a rien fait. Sur Firebug, rien n'est enregistré.

Des idées?

Merveilleux

jqueryinputfocus
11
Robin I Knight

http://jsfiddle.net/HenryGarle/LXngq/

<span>
    <br>
        Span
    <br>
    <input id="InputToFocus" type="text">
</span>

$('span').click(function(){
    $('#InputToFocus').focus();
});

Semble fonctionner correctement, c'est probablement un problème avec vos sélecteurs. Pourriez-vous publier la structure de votre code HTML entourant l'entrée?

25
Henry

Si vous avez id à l'élément d'entrée, vous n'avez pas besoin de javascript pour le faire. Vous pouvez utiliser l'attribut for avec une balise label pointant vers l'ID de l'élément d'entrée. Essaye ça

Fonctionne démo

<label for="input1">Name</label>
<input id="input1" type="text" />

Si vous cliquez sur le texte du nom, le focus sera placé dans le champ de saisie.

20
ShankarSangoli

J'ai essayé cela dans mon code en utilisant jquery

<span id="search-text">search</span>
<input type="text" name="search" id="search">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script type="text/javascript">
    $("#search").hide();
    $("#search-text").click(function(event) {
        $(this).hide();
        $("#search").show();

        $("#search").focus();
    });

    $("#search").focusout(function(event) {
        $(this).hide();
        $("#search-text").show();
        $(this).val('');
    });

</script>
0
Harikrushna Patel
$( "input" ).focus(function() {
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});
span {
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text"> <span>focus fire</span></p>
<p><input type="password"> <span>focus fire</span></p>

https://api.jquery.com/focus/

0
Gurpreet Singh