web-dev-qa-db-ja.com

入力をフォーカスするjQuery onclick関数

ユーザーがページ上のテキストをクリックすると入力にフォーカスするというJQuery関数が必要です。

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

それは何もしませんでした。 Firebugでは何も登録されていません。

何か案は？

素晴らしい

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

正常に動作しているようです。おそらくセレクタに問題があります。入力を囲むHTMLの構造を投稿できますか？

25
Henry

Input要素にidがある場合、これを行うためにJavaScriptは必要ありません。入力要素IDを指すforタグでlabel属性を使用できます。これを試して

動作中デモ

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

名前テキストをクリックすると、フォーカスが入力フィールドに設定されます。

20
ShankarSangoli

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