JS 如何取得 input 的 value 值？-js教程-PHP中文網

JS 如何取得 input 的 value 值？

Guanhui

發布： 2020-06-04 09:56:48

原創

10473 人瀏覽過

JS 如何取得 input 的 value 值？

JS 如何取得 input 的 value 值？

首先使用「querySelector()」取得到元素對象，只需要向該方法傳入input的選擇規則；

程式碼範例

登入後複製

var inputEl = document.querySelector('[name="username"]');

登入後複製

最後在input元素物件中的value屬性就是input的value值，所以只需取得到該屬性即可。

var inputEl = document.querySelector('[name="username"]');

var val = inputEl.value;

console.log(val);

登入後複製

input 屬性HTML5

##值描述accept規定透過檔案上傳來提交的檔案的類型。 align不贊成使用。規定影像輸入的對齊方式。 autocompleteautofocus#規定輸入欄位在頁面載入時是否獲得焦點。 #checkedformnameformactionURL覆寫表單的enctype 屬性。 post

屬性
	mime_type
	left right top middle

	##bottom
	alt	text 定義圖像輸入的替代文字。
	on
#規定是否使用輸入字段的自動完成功能。		autofocus
	（不適用於type="hidden"）
checked	#規定此input 元素首次加載時應被選中。	disabled disabled 當 input 元素載入時停用此元素。
form		#規定輸入欄位所屬的一個或多個表單。
	#覆寫表單的 action 屬性。（適用於type="submit" 和type="image"）	#formenctype ##見註解
（適用於type="submit" 和type="image"）		#formmethod ##get
	覆寫表單的method 屬性。（適用於type="submit" 和type="image"） #formnovalidate ##formnovalidate ##覆寫表單的novalidate 屬性。如果使用該屬性，則提交表單時不進行驗證。	formtarget #########_blank######_self######_parent#######_top #########framename##################會覆寫表單的target 屬性。 ######（適用於 type="submit" 和 type="image"）###
height	pixels %	定義input 欄位的高度。（適用於type="image"）
list	datalist-id	引用包含輸入欄位的預定義選項的datalist 。
max	number date	#規定輸入欄位的最大值。請與 "min" 屬性搭配使用，來建立合法值的範圍。
maxlength	number	#規定輸入欄位中的字元的最大長度。
min	number date	規定輸入欄位的最小值。請與 "max" 屬性搭配使用，來建立合法值的範圍。
multiple	multiple	如果使用該屬性，則允許一個以上的值。
name	field_name	定義 input 元素的名稱。
pattern	regexp_pattern	#規定輸入欄位的值的模式或格式。例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
placeholder	text	#規定幫助使用者填入輸入欄位的提示。
readonly	readonly	規定輸入欄位為唯讀。
required	required	指示輸入欄位的值是必要的。
size	number_of_char	#定義輸入欄位的寬度。
src	URL	定義以提交按鈕形式顯示的圖片的 URL。
step	number	#規定輸入字的合法數字間隔的。
type	button #checkbox file #hidden image password radio reset submit text	規定input 元素的類型。
value	value	#規定 input 元素的值。
width	pixels %	定義input 欄位的寬度。（適用於 type="image"）