私は JavaScript を使った検索に取り組んでいます。フォームを使用するつもりですが、ページ上の他の部分がおかしくなります。次のような入力テキスト フィールドがあります。
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>
これが私の JavaScript コードです:
<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>
テキスト フィールドの値を JavaScript に取得するにはどうすればよいですか?
ベストアンサー1
入力テキスト ボックスの値を直接取得する方法はいくつかあります (入力要素をフォーム要素内にラップせずに)。
方法1
document.getElementById('textbox_id').value希望するボックスの値を取得する
例えば
document.getElementById("searchTxt").value;
注:メソッド 2、3、4、6 は要素のコレクションを返すため、[whole_number] を使用して目的の出現を取得します。最初の要素には を使用し、[0]2 番目の要素には を使用します[1]。
方法2
document.getElementsByClassName('class_name')[whole_number].valueライブHTMLCollectionを返すものを使用する
例えば
document.getElementsByClassName("searchField")[0].value;これがページ内の最初のテキストボックスである場合。
方法3
document.getElementsByTagName('tag_name')[whole_number].valueライブHTMLCollectionも返す使用
例えば
document.getElementsByTagName("input")[0].value;これがページ内の最初のテキスト ボックスである場合。
方法4
document.getElementsByName('name')[whole_number].valueこれもライブNodeListを返す
例えば
document.getElementsByName("searchTxt")[0].value;これがページ内で「searchtext」という名前の最初のテキストボックスである場合。
方法5
document.querySelector('selector').valueCSSセレクターを使用して要素を選択する強力な
例えば
document.querySelector('#searchTxt').value;IDで選択document.querySelector('.searchField').value;クラス別に選択document.querySelector('input').value;タグ名で選択document.querySelector('[name="searchTxt"]').value;名前で選択
方法6
document.querySelectorAll('selector')[whole_number].valueこれも CSS セレクターを使用して要素を選択しますが、そのセレクターを持つすべての要素を静的な Nodelist として返します。
例えば
document.querySelectorAll('#searchTxt')[0].value;IDで選択document.querySelectorAll('.searchField')[0].value;クラス別に選択document.querySelectorAll('input')[0].value;タグ名で選択document.querySelectorAll('[name="searchTxt"]')[0].value;名前で選択
サポート
| ブラウザ | 方法1 | 方法2 | 方法3 | 方法4 | 方法5/6 |
|---|---|---|---|---|---|
| IE6 | Y(バギー) | いいえ | はい | Y(バギー) | いいえ |
| IE7 | Y(バギー) | いいえ | はい | Y(バギー) | いいえ |
| IE8 | はい | いいえ | はい | Y(バギー) | はい |
| IE9 | はい | はい | はい | Y(バギー) | はい |
| IE10 | はい | はい | はい | はい | はい |
| FF3.0 | はい | はい | はい | はい | いいえ |
| FF3.5/FF3.6 | はい | はい | はい | はい | はい |
| FF4b1 | はい | はい | はい | はい | はい |
| GC4/GC5 | はい | はい | はい | はい | YY=はい、N=いいえ |
| Safari4/Safari5 | はい | はい | はい | はい | はい |
| オペラ10.10/ | |||||
| オペラ10.53/ | はい | はい | はい | Y(バギー) | はい |
| オペラ10.60 | |||||
| オペラ12 | はい | はい | はい | はい | はい |
鍵：
IE =インターネットエクスプローラ
FF =Mozilla Firefox
GC =Google Chrome
便利なリンク