IDに依存しないHTMLフォームの最初の入力要素にフォーカスを設定するにはどうすればよいですか？

84

要素のIDを知らなくても、ページの読み込み時に最初の入力要素（テキストボックス、ドロップダウンリストなど）にWebページのフォーカス（入力カーソル）を設定する簡単な方法はありますか？

Webアプリケーションのすべてのページ/フォームに共通のスクリプトとして実装したいと思います。

javascript  html  forms  focus 
— splattne
ソース
7
備考ユーザーがフォームを表示するためにページを下にスクロールする必要がある方法でフォームがページに配置されている場合、フォーカスを設定すると、アンカーのようにページが自動的に下にスクロールします。このようなページにアクセスすると、すぐにフォームの位置までスクロールダウンされるので、これはあまり良くありません。SafariとFFでテストしました（IE7はページスクロールを実行しません）。
— マルコデマイオ2010年
@Marco_Demaio私のWebアプリは、すべてのページのウィンドウの上部近くに入力ボックスがあるように構成されています。
— splattne 2010年
3
ユーザーがブラウザウィンドウの高さを768pxよりも小さいサイズに変更した場合はどうなりますか。ページは、フォーカスを設定した場所までスクロールします。とにかく、私はあなたがそのような小さな問題について知らなかった場合に備えてあなたに警告したかっただけです、私はいくつかのテストをする前にそれについても知りませんでした。
— マルコデマイオ2010年

回答:

96

jQueryベースの方法を試すこともできます。

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});
— マルコデュミック
ソース
できます！jQueryをWebアプリケーションに統合し始めています。だから、私はこのアプローチに固執すると思います！マルコ、ありがとう！
— splattne
3
この場合、ページの最初のフォームが非表示になっているとどうなりますか？または、フォームの最初の要素がCSSで非表示になっている場合はどうなりますか？確かにこれは失敗するでしょう。もちろん私は衒学者ですが、それが私が転がる方法です。
— James Hughes
私の場合（ASP.NETを使用）、非表示にされないフォームが1つだけあります。だからこれは私のために働く。
— splattne
@Jame Hughes、関数として記述し、必要なときに呼び出すことができ、例外を作成することもできます。私にとって、このソリューションは本当に役に立ちました。
— Luci
これは何らかの理由で私には機能していません。カーソルが表示されるべきではありません。
— クリス
136

これは質問に答えませんが（共通のスクリプトが必要です）、HTML5が「autofocus」属性を導入していることを他の人が知っていると便利かもしれません。

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

HTML5に飛び込むには、より多くの情報があります。

— ジェイコブ・スタンリー
ソース
2
オートフォーカスは属性名です。その値はどうですか？autofocus = trueのようなSomethigは必要ありませんか？値を設定しないとはどういう意味ですか？
— オタク2013
4
HTML5では、一部の属性に値を付ける必要はありません。これが当てはまる場合、「チェック済み」は別の属性です。値が省略されている場合、それは名前と同じであることを意味すると思います（例：autofocus = "autofocus"およびchecked = "checked"）。
— ジェイコブスタンレー
にautofocus値を付けずに使用しようとすると、Springアプリが壊れますspring:form。autofocus="autofocus"ただし、正常に動作します。ありがとう、@ジェイコブ。
— Sergei Tachenov 2016年
2
@Geekオートフォーカス属性は、他の多くの属性と同様に、ブール属性タイプです。そのため、値を割り当てるのではなく、宣言的な方法でのみ使用されます。詳細については、w3c仕様を参照してください：w3.org/TR/html5/infrastructure.html#boolean-attribute
— n1kkou
34 
document.forms[0].elements[0].focus();

これは、たとえば、ループを使用して調整できます。特定の種類のフィールド、無効なフィールドなどに焦点を当てないでください。実際にフォーカスしたいフィールドにclass = "autofocus"を追加し、forms [i] .elements [j]をループしてそのclassNameを探す方がよいでしょう。

とにかく：通常、すべてのページでこれを行うことはお勧めできません。入力に焦点を合わせると、ユーザーは次のような機能を失います。キーボードからページをスクロールします。予期しない場合、これは煩わしい可能性があるため、フォームフィールドの使用がユーザーの希望どおりになることが確実な場合にのみ、オートフォーカスを実行してください。すなわち。あなたがグーグルなら。

— ボビンス
ソース
3
質問にはjqueryタグがないため、正解である必要があります。
— カレH.Väravas
@KalleH.Väravasいいえ、それは問題のどこにも見つからない仮定をしているので、反対票を投じるべきです。少なくとも1つのフォームがあります。通常、それは機能しません。
— 9ilsdx 9rvj0lo19年
18

私が機能していることがわかった最も包括的なjQuery式は（ここの助けを借りて）

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});
— ngeek
ソース
1
私はこれを使用していましたが、テーブルに1000を超える多数のチェックボックスがある場合、IEでの実行が非常に遅いことに気付きました。それについて何をすべきかわからない、最初の入力フィールドに焦点を合わせるのをあきらめなければならないかもしれません。
— サムワトキンス
5

また、非表示の入力をスキップする必要があります。

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
— マルコデュミック
ソース
私は間違っているかもしれませんが、forms [0]に非表示の入力がない場合、このループには定義された動作がありません。
— xtofl 2008年
丁度。これは、主要な非表示の入力をスキップするために使用されます。また、フォームに非表示フィールドがないことを前提に記述されています。jQueryでもそれを行うことができましたが（別の回答を投稿します）、jQueryを関与させたいとは言われませんでした。
— Marko Dumic 2008年
1
@MarkoDumicwhileステートメントを使用できるのに、なぜメモリを浪費するのですか？
— ルシオ
3

このコードをbodyタグの最後に置くと、画面上で最初に表示され、非表示にされていない有効な要素が自動的にフォーカスされます。それは私が急いで思いつくことができるほとんどの場合を処理します。

<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>
— ジェームズヒューズ
ソース
1
ここで考慮すべきことの1つは、それ自体は非表示ではなく、祖先が非表示になっている要素と一致する可能性があることです。それには、DOMを追跡し、この種の状況では深刻なやり過ぎだと私が感じる各祖先の可視性をテストする必要があります。
— James Hughes
<input type = "text" readonly = "readonly">はどうですか？そのようなケースをコードに追加する必要があると思います。通常、人々は読み取り専用の入力テキストフィールドに焦点を合わせたくありません。とにかく素敵なコードと+1ありがとう！
— マルコデマイオ2010年
テストされていませんが、！forms [i] [j] .readonly！= undefinedで更新しました
— James Hughes
3

上記の答えをたくさん試しましたが、うまくいきませんでした。これは次の場所で見つかりました：http： //www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317ありがとうKolodvor。

$("input:text:visible:first").focus();
— マックスウェスト
ソース
3

私はこれを使用しています：

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
— ロバート・ブルッカー
ソース
2

これにより、textareasやselectボックスなど、表示されている一般的な入力の最初のものが取得されます。これにより、それらが非表示、無効化、または読み取り専用にならないようにすることもできます。また、ソフトウェアで使用するターゲットdiv（つまり、このフォーム内の最初の入力）も可能になります。

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();
— デイブK
ソース
1

JSF2.2 +を使用していて、オートフォーカスを値なしで属性として渡すことができない場合は、次のように使用します。

 p:autofocus="true"

そして、それを名前空間pに追加します（よく使用されるpt。好きなものは何でも）。

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
— フェダー
ソース
0

これにはtextareasが含まれ、ラジオボタンは除外されます

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});
— HectorPerez
ソース
0

親がこの要素を非表示にしている可能性があるため、display属性をチェックする代わりにclientHeightを使用できるはずです。

function setFocus() {
    var forms = document.forms || [];
        for (var i = 0; i < forms.length; i++) {
            for (var j = 0; j < forms[i].length; j++) {
            var widget = forms[i][j];
                if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
                 && (typeof widget.disabled === "undefined" || widget.disabled === false)
                 && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
                        widget.focus();
                        break;
                }
            }
        }
    }   
}
— thecoolmacdude
ソース
0

サードパーティのライブラリがない場合は、次のようなものを使用します

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

すべてのフォーム要素タグを考慮し、他の回答のように非表示/無効なタグを除外するようにしてください。

— cghislai
ソース
0

jqueryなし、たとえば通常のjavascriptあり：

document.querySelector('form input:not([type=hidden])').focus()

Safariでは動作しますがChrome75では動作しません（2019年4月）

— localhostdotdev
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.