JavaScript 獲取文字框值

Mehvish Ashiq 2022年5月10日
JavaScript 獲取文字框值

本教程介紹了 text value 屬性和 jQuery val() 函式以獲取 JavaScript 文字框的值。

text value 屬性用於返回或設定輸入欄位的 value 屬性的值。value 屬性顯示輸入文字框的初始值。它可以有使用者定義的值或預設值。

jQuery val() 方法是獲取表單元素的值。這裡,表單元素是指 inputtextareaselect 元素。如果在空集合上呼叫,它會返回 undefinedval() 函式設定或返回所選元素的 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;
}

輸出:

javascript 獲取文字框值 - 輸出一

我們學習的第一個獲取文字框值的方法是 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 獲取文字框值 - 輸出二

上面的 JavaScript 程式碼使用 document.getElementByName 來獲取具有給定名稱的所有元素的列表(此例項為 fullName)。索引 0 處的元素值是從所有元素的列表中選擇的。如果你的元素沒有 id 屬性,也可以使用它。

function nameFunction(){
	document.getElementById("displayName").innerHTML = 
    document.forms[0].elements[0].value;
}

輸出:

javascript 獲取文字框值 - 輸出三

上面的程式碼修改了 id 值為 displayName 的元素的內容,並分配從索引 0 接收的值。請記住,你的 HTML 檔案中必須有一個 <form> 元素才能通過索引獲取值。

function nameFunction(){
 document.getElementById("displayName").innerHTML = $("input:text").val();
}

輸出:

javascript 獲取文字框值 - 輸出四

上面給出的程式碼片段展示了 jQuery 方法 val(),它用於訪問 JavaScript 文字框的值。此方法獲取型別為 text 的第一個 input 元素的值。不要忘記在 <head> 標記中包含 jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Textbox