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

Question

検索には JavaScript を使用しています。フォームを使用したいのですが、ページ上の他のものが壊れてしまいます。この入力テキストフィールドがあります:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField" />

これは私の JavaScript コードです:

<script type="text/javascript">
  関数searchURL(){
    window.location = "http://www.myurl.com/search/" (テキスト値を入力);
  }
</スクリプト>

テキストフィールドの値をJavaScriptに渡すにはどうすればよいですか?

Answer 1

リーリー

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

Answer 2

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

方法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」という名前の最初のテキスト ボックスの場合。

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

document.querySelector('selector').value

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

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

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

クラスで選択

document.querySelector('input').value;

タグ名で選択

• document.querySelector('[name="searchTxt"]').value; 名前で選択
• 方法6
document.querySelectorAll('selector')[integer].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;

名前で選択
• ＃＃＃サポート＃＃＃
  ＃＃＃ブラウザ＃＃＃ 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