4

Web ページの読み込み時にテキスト ボックスにフォーカスを合わせたい。google.com にアクセスすると、テキスト ボックスが既にフォーカスされていることがわかります。それが私が欲しいものです。

ここに私のフォームがあります：

<form id="searchthis" action="#" style="display:inline;" method="get">
  <input id="namanyay-search-box" name="q" size="40" x-webkit-speech/>
  <input id="namanyay-search-btn" value="Search" type="submit"/>
4

3 に答える 3

3

テキスト入力にautofocus属性を与えます。完璧ではありませんが、かなり優れたブラウザーサポートを備えています。この機能はかなり簡単にポリフィルできます。以下に例を書いてみましょう。これをドキュメントの一番下に配置するだけで (実行時に要素が既に存在するように)、要素が検出されautofocus(注: は1 つだけである必要があります。そうしないと、一貫性のない結果が得られる可能性があります)、それにフォーカスを当てます。 .

(function () {

    // Proceed only if new inputs don't have the autofocus property
    if ( document.createElement("input").autofocus === undefined ) {

        // Get a reference to all forms, and an index variable
        var forms = document.forms, fIndex = -1;

        // Begin cycling over all forms in the document
        formloop: while ( ++fIndex < forms.length ) {

            // Get a reference to all elements in form, and an index variable
            var elements = forms[ fIndex ].elements, eIndex = -1;

            // Begin cycling over all elements in collection
            while ( ++eIndex < elements.length ) {

                // Check for the autofocus attribute
                if ( elements[ eIndex ].attributes["autofocus"] ) {

                    // If found, trigger focus
                    elements[ eIndex ].focus(); 

                    // Break out of outer loop
                    break formloop;

                }

            }

        }

    }

}());

いくつかの初期テストの後、これは Internet Explorer 6、Firefox 3 などにまでさかのぼってサポートを提供するようです。

選択したブラウザーでテストします: http://jsfiddle.net/jonathansampson/qZHxv/show

于 2013-04-13T15:48:27.480 に答える
2

Jonathan Sampson の HTML5 ソリューションはおそらく最高です。jQuery を使用する場合は、steo のサンプルも動作するはずです。完全にするために、すべてのブラウザーと IE10+ 向けのプレーンな JS ソリューションを紹介します。

window.addEventListener("load",function() {
  document.getElementById("namanyay-search-box").focus();
});
于 2013-04-13T15:50:42.087 に答える
0 
$(document).ready(function(){

..code.. 
$('.textbox-class-name').focus();
..code.. 
});

または、試着できます$(window).load()

于 2013-04-13T15:43:41.210 に答える