如何在 JavaScript 中取得輸入文字欄位的值？

在JavaScript 中取得輸入文字欄位值

為了回應您的查詢，有多種方法可用於直接擷取輸入文字欄位的值，而無需使用表單。

方法一：使用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 傳回一個可即時用於根據其類別選擇所需的文字欄位。

document.getElementsByClassName("searchField")[0].value; // Get the value of the first text field with class "searchField"

方法三：使用getElementsByTagName()

document.getElementsByTagName('input')[whole_number].value 也將返回一個實時您根據其標籤名稱選擇所需的文字欄位。

document.getElementsByTagName("input")[0].value; // Get the value of the first text input field

方法四：使用getElementsByName()

document.getElementsByName('name')[whole_number].value 傳回一個即時。 name 屬性選擇所需的文字欄位。

document.getElementsByName("searchTxt")[0].value; // Get the value of the first text field with name "searchTxt"

方法五：使用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中文網其他相關文章！