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

Question

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

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

score 149 · Accepted Answer

これは質問には答えませんが (一般的なスクリプトが必要です)、HTML5 が 'autofocus' 属性を導入していることを他の人が知っておくと役立つかもしれません:

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

詳細については、HTML5を参照してください。

score 102 · Accepted Answer

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

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

score 39 · Accepted Answer

document.forms[0].elements[0].focus();

これは、ループを使用して洗練することができます。特定のタイプのフィールド、無効なフィールドなどにフォーカスしないでください。実際にフォーカスしたいフィールドに class="autofocus" を追加し、その className を探して forms[i].elements[j] をループする方がよいかもしれません。

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

score 19 · Accepted Answer

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

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});

score 7 · Accepted Answer

Prototype JavaScript フレームワークを使用している場合は、 focusFirstElementメソッドを使用できます。

Form.focusFirstElement(document.forms[0]);

score 6 · Accepted Answer

6

役に立つかもしれない記事がここにあります: Set Focus to First Input on Web Page

于 2008-11-10T10:34:10.940 に答える

score 5 · Accepted Answer

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

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();

score 4 · Accepted Answer

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

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();

score 3 · Accepted Answer

上記の多くの回答を試してみましたが、うまくいきませんでした。http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317でこれを見つけました。

$("input:text:visible:first").focus();

score 3 · Accepted Answer

このコードを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>

score 2 · Accepted Answer

これは、テキストエリアや選択ボックスを含む、目に見える一般的な入力の最初のものを取得します。これにより、それらが非表示、無効、または読み取り専用ではないことも確認できます。また、ソフトウェアで使用するターゲット div も使用できます (つまり、このフォーム内の最初の入力)。

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();

score 1 · Accepted Answer

jquery を使用しない場合、たとえば通常の JavaScript を使用する場合:

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

Safari では動作しますが、Chrome 75 では動作しません (2019 年 4 月)

score 0 · Accepted Answer

0

とAngularJS:

angular.element('#Element')[0].focus();

于 2014-05-08T12:02:54.090 に答える

score 0 · Accepted Answer

これにはテキストエリアが含まれ、ラジオボタンは除外されます

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

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

18 に答える 18

Related

Reference