ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で入力テキストフィールドの値を取得するにはどうすればよいですか?
クエリに応じて、フォームを使用せずに入力テキスト フィールドの値を直接取得するためのメソッドがいくつか用意されています。
方法 1: を使用するgetElementById()
document.getElementById('textbox_id').value は、目的のテキスト入力フィールドの値を直接取得します。
document.getElementById("searchTxt").value; // Get the value of the searchTxt text field
方法 2: 使用getElementsByClassName()
document.getElementsByClassName('class_name')[whole_number].value はライブ HTMLCollection を返し、そのクラスに基づいて目的のテキスト フィールドを選択するために使用できます。
document.getElementsByClassName("searchField")[0].value; // Get the value of the first text field with class "searchField"
方法 3: を使用するgetElementsByTagName()
document.getElementsByTagName('input')[whole_number].value はライブ HTMLCollection も返し、タグ名に基づいて目的のテキスト フィールドを選択できます。
document.getElementsByTagName("input")[0].value; // Get the value of the first text input field
方法 4: を使用するgetElementsByName()
document.getElementsByName('name')[whole_number].value はライブ NodeList を返し、name 属性に基づいて目的のテキスト フィールドを選択するために使用できます。
document.getElementsByName("searchTxt")[0].value; // Get the value of the first text field with name "searchTxt"
方法 5: を使用するquerySelector()
document.querySelector('selector').value は、CSS セレクターを使用して、目的のテキスト フィールドを選択します。
document.querySelector('#searchTxt').value; // Get the value of the text field with id "searchTxt"
方法 6: 使用するquerySelectorAll()
document.querySelectorAll('selector')[whole_number].value も CSS セレクターを使用して目的のテキスト フィールドを選択しますが、静的な NodeList.
document.querySelectorAll('.searchField')[0].value; // Get the value of the first text field with class "searchField"以下の表に、これらのメソッドのブラウザ互換性情報を示します。
Browser | Method 1 | Method 2 | Method 3 | Method 4 | Method 5/6 |
---|---|---|---|---|---|
IE6 | Buggy | No | Yes | Buggy | No |
IE7 | Buggy | No | Yes | Buggy | No |
IE8 | Yes | No | Yes | Buggy | Yes |
IE9 | Yes | Yes | Yes | Buggy | Yes |
IE10 | Yes | Yes | Yes | Yes | Yes |
FF3.0 | Yes | Yes | Yes | Yes | No |
FF3.5/FF3.6 | Yes | Yes | Yes | Yes | Yes |
FF4b1 | Yes | Yes | Yes | Yes | Yes |
GC4/GC5 | Yes | Yes | Yes | Yes | Yes and Yes |
Safari4/Safari5 | Yes | Yes | Yes | Yes | Yes |
Opera10.10/ | |||||
Opera10.53/ | Yes | Yes | Yes | Buggy | Yes |
Opera10.60 | |||||
Opera 12 | Yes | Yes | Yes | Yes | Yes |
以上がJavaScript で入力テキストフィールドの値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。