5

このプロジェクトtagsinputのウェブサイトでテキスト フィールドを使用しています。

テキストフィールドにフォーカスを設定しようとしていますが、うまくいきません。次のエラーが表示されます。

Unhandled exception at line 37, column 9 in
LOCALDOMAIN-LINK-REMOVED
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'focus'.

このline (37)エラーが参照しているのは次のとおりです。

searchQueryTB.focus();

私の完全なコードは次のとおりです。

document.onload = FocusSearchQueryTextBox();

function FocusSearchQueryTextBox() {
    var searchQueryTB = document.getElementsByClassName("TBhandle0F7X");
    searchQueryTB.focus();
}

マークアップ:

<input type="text" value="" name="SearchQuery" id="tagsinput" class="TBhandle0F7X" />

だから私はそれがプロジェクトtextfieldで使用されているjQuery UIまたは何かであるという点でテキストフィールドが実際には適切ではないという事実と関係があるかもしれないと仮定していますか? tagsinputまたは、私が間違っているかもしれませんが、これまで Google で運が良かったことがなく、プロジェクトの Web サイトにこの問題に関連するものはないようです。

これもjQueryで試しましたが、予想通り、どちらも機能しませんでした。同じエラー。

何が間違っているか、またはこれをどのように修正できるかについての提案はありますか?

4

4 に答える 4

7

getElementsByClassNameクラスを持つ要素が1つしかない場合でも、要素自体ではなくDOM要素のコレクションを返しますTBhandle0F7X

あなたはおそらくしたい

var searchQueryTB = document.getElementsByClassName("TBhandle0F7X")[0];
于 2012-06-28T04:47:16.777 に答える
3

配列を返す問題getElementsByClassName（したがって、インデックスが必要になる）に加えて、このメソッドがすべてのブラウザーでサポートされているわけではないという問題があるため、id属性とを使用することをお勧めしますdocument.getElementById()。

focus()しかし、IEには「怠惰な」実装に関する問題があるという問題が残っています。いくつかの解決策を含むIEではフォーカスが機能しないことを参照してください。

さらに、autofocusHTMLマークアップで属性を使用することを検討できます（スクリプトが無効になっている場合でも、最新のブラウザーでサポートされています）。

于 2012-06-28T05:09:40.937 に答える
1

を使用するgetElementsByClassNameと、結果は配列のようになるため、コードsearchQueryTBでは配列になります。

解決：

document.onload = FocusSearchQueryTextBox();

function FocusSearchQueryTextBox() {
    var searchQueryTBs = document.getElementsByClassName("TBhandle0F7X"),
        searchQueryTB = searchQueryTBs && searchQueryTBs[0];

    searchQueryTB && searchQueryTB.focus();
}
于 2012-06-28T04:52:37.423 に答える
1

document.getElementsByClassNamefocusDOM 要素のコレクションを返すため、そのコレクションを割り当てた変数でDOM 要素メソッドを呼び出すことはできません。コレクションの最初のインデックスにある要素を に割り当てることができますが、searchQueryTB私には (これは私の側では完全に間違った仮定である可能性があります)、焦点を当てようとしているテキスト ボックスは 1 つしかないように思えます。id属性を与えて使用しないのはなぜdocument.getElementByIdですか？

ユーザーが最新の Web ブラウザー (基本的に Internet Explorer 8 以降またはその他のブラウザー) を使用していると予想される場合は、次のquerySelector方法を使用できます。

var searchQueryTB = document.querySelector('.TBhandle0F7X'); // assuming only a single text box with this class
于 2012-06-28T04:50:38.237 に答える