JavaScript 獲取文字框值
本教程介紹了 text value 屬性和 jQuery val() 函式以獲取 JavaScript 文字框的值。
text value 屬性用於返回或設定輸入欄位的 value 屬性的值。value 屬性顯示輸入文字框的初始值。它可以有使用者定義的值或預設值。
jQuery val() 方法是獲取表單元素的值。這裡，表單元素是指 input、textarea 和 select 元素。如果在空集合上呼叫，它會返回 undefined。val() 函式設定或返回所選元素的 value 屬性的值。
使用此函式，我們可以為所有匹配的元素設定 value 屬性的值，並返回第一個匹配元素的 value 屬性的值。請記住，此函式主要用於 HTML 表單元素。
所有示例的 HTML 程式碼將保持不變（除了使用 <form> 元素的示例），但 JavaScript 程式碼將不斷變化以實踐不同的方式。
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title> Learning JavaScript Get Textbox Value</title>
</head>
<body>
Full Name: <input type="text" id="fullName" name="fullName" value="Mehvish Ashiq">
<button type="button" onclick="nameFunction()">Submit</button>
<p id="displayName"></p>
</body>
</html>
獲取 JavaScript 文字框價值的不同方法
下面給出了各種 JavaScript 程式碼片段來獲取 JavaScript 文字框的值。
function nameFunction() {
var element = document.getElementById('fullName').value;
document.getElementById('displayName').innerHTML = element;
}
輸出：
我們學習的第一個獲取文字框值的方法是 document.getElementById()。它選擇具有特定值的 id 屬性的第一個元素（此處為 fullName），通過使用 .value 屬性獲取其值，並將其儲存到 element 變數中。document.getElementById() 再次用於修改具有 id 值 displayName 的元素的內容。要更新內容，使用 .innerHTML 屬性。
function nameFunction() {
// first element in DOM (index 0) with name="fullName"
var element = document.getElementsByName('fullName')[0].value
document.getElementById('displayName').innerHTML = element;
}
輸出：
上面的 JavaScript 程式碼使用 document.getElementByName 來獲取具有給定名稱的所有元素的列表（此例項為 fullName）。索引 0 處的元素值是從所有元素的列表中選擇的。如果你的元素沒有 id 屬性，也可以使用它。
function nameFunction() {
document.getElementById('displayName').innerHTML =
document.forms[0].elements[0].value;
}
輸出：
上面的程式碼修改了 id 值為 displayName 的元素的內容，並分配從索引 0 接收的值。請記住，你的 HTML 檔案中必須有一個 <form> 元素才能通過索引獲取值。
function nameFunction() {
document.getElementById('displayName').innerHTML = $('input:text').val();
}
輸出：
上面給出的程式碼片段展示了 jQuery 方法 val()，它用於訪問 JavaScript 文字框的值。此方法獲取型別為 text 的第一個 input 元素的值。不要忘記在 <head> 標記中包含 jQuery。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
