ユーザーがページ上のテキストをクリックすると入力にフォーカスするというJQuery関数が必要です。
$(document).ready(function(){
$('#header.search span').click(function(){
$('#header.search input').focus();
});
});
それは何もしませんでした。 Firebugでは何も登録されていません。
何か案は?
素晴らしい
http://jsfiddle.net/HenryGarle/LXngq/
<span>
<br>
Span
<br>
<input id="InputToFocus" type="text">
</span>
$('span').click(function(){
$('#InputToFocus').focus();
});
正常に動作しているようです。おそらくセレクタに問題があります。入力を囲むHTMLの構造を投稿できますか?
Input要素にid
がある場合、これを行うためにJavaScriptは必要ありません。入力要素IDを指すfor
タグでlabel
属性を使用できます。これを試して
動作中デモ
<label for="input1">Name</label>
<input id="input1" type="text" />
名前テキストをクリックすると、フォーカスが入力フィールドに設定されます。
私は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>
$( "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>