JavaScript のヒント: テキスト入力フィールドの値を取得する

Question

検索にはJavaScriptを使用しています。フォームを使用したいのですが、ページ上の他のものが壊れてしまいます。この入力テキストフィールドがあります: &lt;inputname="searchTxt" type="text" maxlength="512"id="searchTxt"cla

P粉814160988 · Answer

リーリー

この機能を codepen で表示します。

P粉828463673 · Answer

入力テキストボックスの値を (フォーム要素内で入力要素をラップせずに) 直接取得するには、いくつかの方法があります。

方法1

document.getElementById('textbox_id').value 必要なボックスの値を取得します

＃＃＃例えば＃＃＃

document.getElementById("searchTxt").value;

注:

メソッド 2、3、4、および 6 は要素のコレクションを返すため、[integer] を使用して必要な要素を取得します。最初の要素には [0] を使用し、2 番目の要素には [1] を使用します...方法 2

リアルタイムの HTMLCollection を返す

document.getElementsByClassName('class_name')[integer].value

を使用します。＃＃＃例えば＃＃＃ document.getElementsByClassName("searchField")[0].value;

(これがページ上の最初のテキストボックスの場合)。

方法 3

document.getElementsByTagName('tag_name')[integer].value を使用します。これもライブ HTMLCollection を返します

＃＃＃例えば＃＃＃

document.getElementsByTagName("input")[0].value;

(これがページ上の最初のテキストボックスの場合)。方法 4

document.getElementsByName('name')[integer].value

、リアルタイムの NodeList も返します＃＃＃例えば＃＃＃

document.getElementsByName("searchTxt")[0].value;

、これがページ上の「searchtext」という名前の最初のテキストボックスの場合。

方法 5CSS セレクターを使用して要素を選択する、強力な

document.querySelector('selector').value

を使用します。＃＃＃例えば＃＃＃

document.querySelector('#searchTxt').value; id で選択

document.querySelector('.searchField').value;

クラスで選択

document.querySelector('input').value;

タグ名で選択

document.querySelector('[name="searchTxt"]').value; 名前で選択
方法6
。これも CSS セレクターを使用して要素を選択しますが、そのセレクターを持つすべての要素を静的 NodeList として返します。 ＃＃＃例えば＃＃＃
document.querySelectorAll('#searchTxt')[0].value; ID で選択

document.querySelectorAll('.searchField')[0].value;

クラスで選択

document.querySelectorAll('input')[0].value; タグ名で選択

document.querySelectorAll('[name="searchTxt"]')[0].value;


＃＃＃サポート＃＃＃

＃＃＃ブラウザ＃＃＃
IE6IE7IE8IE9IE10FF3.0FF3.5/FF3.6FF4b1GC4/GC5サファリ4/サファリ5オペラ10.10/オペラ10.53/オペラ10.60オペラ 12

方法1
方法 2
方法 3
方法 4
方法 5/6





Y(問題)
N
Y
Y(問題)
N



Y(問題)
N
Y
Y(問題)
N



Y
N
Y
Y(問題)
Y



Y
Y
Y
Y(問題)
Y



Y
Y
Y
Y
Y



Y
Y
Y
Y
N IE=Internet Explorer



Y
Y
Y
Y
Y FF=Mozilla Firefox



Y
Y
Y
Y
Y GC=Google Chrome



Y
Y
Y
Y
Y Y=はい、N=いいえ



Y
Y
Y
Y
Y











Y
Y
Y
Y(問題)
Y











Y
Y
Y
Y
Y

方法1	方法 2	方法 3	方法 4	方法 5/6
Y(問題)	N	Y	Y(問題)	N
Y(問題)	N	Y	Y(問題)	N
Y	N	Y	Y(問題)	Y
Y	Y	Y	Y(問題)	Y
Y	Y	Y	Y	Y
Y	Y	Y	Y	N IE=Internet Explorer
Y	Y	Y	Y	Y FF=Mozilla Firefox
Y	Y	Y	Y	Y GC=Google Chrome
Y	Y	Y	Y	Y Y=はい、N=いいえ
Y	Y	Y	Y	Y

Y	Y	Y	Y(問題)	Y

Y	Y	Y	Y	Y

JavaScript のヒント: テキスト入力フィールドの値を取得する

全員に返信(2)返信します

方法1

リアルタイムの HTMLCollection を返す

、これがページ上の「searchtext」という名前の最初のテキスト ボックスの場合。

を使用します。 ＃＃＃例えば＃＃＃

タグ名で選択

クラスで選択

、これがページ上の「searchtext」という名前の最初のテキストボックスの場合。

を使用します。＃＃＃例えば＃＃＃