web-dev-qa-db-ja.com

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

Webページのフォーカスを設定（入力カーソル）最初の入力要素（テキストボックス、ドロップダウンリスト、...）なしでページをロードする簡単な方法はありますか要素のIDを知る必要がありますか？

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

javascripthtmlformsfocus
82
splattne

JQueryベースの方法を試すこともできます：

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

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

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

HTML5に飛び込む に詳細があります。

127
Jacob Stanley
document.forms[0].elements[0].focus();

これは、たとえばループを使用して改善できます。特定のタイプのフィールド、無効なフィールドなどに焦点を合わせないでください。ベターは、実際にフィールドにclass = "autofocus"を追加することですdoフォーカスし、そのclassNameを探しているforms [i] .elements [j]をループします。

とにかく、通常、すべてのページでこれを行うのは良い考えではありません。入力に焦点を合わせると、ユーザーは次の機能を失います。キーボードからページをスクロールします。予想外の場合、これは迷惑になる可能性があるため、フォームフィールドの使用がユーザーの希望通りであると確信している場合にのみオートフォーカスします。すなわち。あなたがGoogleの場合。

30
bobince

私が働いていることがわかった最も包括的なjQuery式は、（ here 以上の助けを借りて）

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

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

Form.focusFirstElement(document.forms[0]);
7
John Topley

ここに役に立つかもしれない記事があります： Webページの最初の入力にフォーカスを設定

6
Galwegian

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

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

上記の多くの答えを試してみましたが、うまくいきませんでした。次の場所にあります： http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 ありがとうKolodvor。

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

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

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

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

これは、テキストエリアや選択ボックスなど、表示される一般的な入力の最初を取得します。また、非表示、無効化、読み取り専用にならないようにします。また、ソフトウェアで使用するターゲットdivを許可します（つまり、このフォーム内の最初の入力）。

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

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

 p:autofocus="true"

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

<html ... xmlns:p="http://Java.Sun.com/jsf/passthrough">
1
feder

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

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

サードパーティのライブラリがなければ、次のようなものを使用します

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

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

0
cghislai

AngularJSの場合：

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

jqueryなし、例えば通常のjavascriptの場合：

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

safariで動作しますが、Chrome 75では動作しません（2019年4月）

0
localhostdotdev

親がこの要素を隠している可能性があるため、表示属性をチェックする代わりに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;
                }
            }
        }
    }   
}
0
thecoolmacdude