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>