如何使用 JavaScript 取得文字輸入欄位的值？

如何使用 JavaScript 擷取文字輸入欄位的值？

在表單元素可能破壞網頁其他方面的情況下，取得輸入文字欄位值直接變得必要。 JavaScript 提供了多種方法來實現此目的：

方法1：document.getElementById

document.getElementById('searchTxt').value;

此方法透過輸入欄位的ID 擷取輸入欄位的值。

方法二： document.getElementsByClassName

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

此方法選擇具有特定類別的所有輸入欄位並傳回 HTMLCollection。使用 [0] 存取第一個元素（如果有多個元素）。

方法 3：document.getElementsByTagName

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

此方法選擇所有輸入元素在頁面上並傳回 HTMLCollection。再次對第一個元素使用 [0]。

方法 4：document.getElementsByName

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

此方法會擷取所有具有特定名稱的輸入欄位。第一次出現時使用 [0]。

方法 5：document.querySelector

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

此方法使用 CSS 選擇器來選擇元素，從而實現定向檢索。

方法六： document.querySelectorAll

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

與 document.querySelector 類似，此方法使用 CSS 選擇器，但傳回所有符合元素的 document.querySelector 類似，此方法使用 CSS 選擇器，但傳回所有符合元素的 document。第一個元素使用 [0]。

瀏覽器支援

下表顯示了這些方法在不同瀏覽器中的支援等級：

Browser	Method 1	Method 2	Method 3	Method 4	Method 5/6
IE6	Y(Buggy)	N	Y	Y(Buggy)	N
IE7	Y(Buggy)	N	Y	Y(Buggy)	N
IE8	Y	N	Y	Y(Buggy)	Y
IE9	Y	Y	Y	Y(Buggy)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N
FF3.5/FF3.6	Y	Y	Y	Y	Y
FF4b1	Y	Y	Y	Y	Y
GC4/GC5	Y	Y	Y	Y	Y
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/	Y	Y	Y	Y(Buggy)	Y
Opera10.53/	Y	Y	Y	Y	Y
Opera10.60	Y	Y	Y	Y	Y
Opera 12	Y	Y	Y	Y	Y

以上是如何使用 JavaScript 取得文字輸入欄位的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！