在 JavaScript 中获取文本框的值

JavaScript 7月前 611

本教程介绍了 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;
}

输出：

在 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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。

JavaScript

获取 JavaScript 文本框价值的不同方法

相关文章