在 jQuery 中设置输入值
val() 方法可以在 jQuery 中用于设置 jQuery 中输入字段的值。本教程演示如何使用 val() 方法在 jQuery 中设置输入字段的值。
在 jQuery 中设置输入值
val() 是 jQuery 中的内置方法，用于返回或设置给定元素的值。如果此方法返回值，那将是第一个选定元素的值。
如果此方法用于设置元素的值，则可以为一个或多个元素设置该值。该方法可以以三种不同的方式使用。
-
首先，返回元素的值。
语法：
$(selector).val() -
设置元素的值。
语法：
$(selector).val("value") -
使用函数设置值。
语法：
$(selector).val(function(index, CurrentValue))其中选择器可以是元素的 id、类或名称，
value是用作新值的值。Index和CurrentValue返回元素索引在集合中的位置和所选元素的当前值。
让我们有一个简单的例子来返回输入字段的值。
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> jQuery Val() Method</title>
<style>
p {
color: green;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<input type="text" placeholder="Type Something">
<p></p>
<script>
$( "input" ).keyup(function() {
var Input_Value = $( this ).val();
$( "p" ).text( Input_Value );
}).keyup();
</script>
</body>
</html>
上面的代码将返回输入字段的值并将其写入给定的段落。
输出：
现在让我们尝试使用 val() 方法设置输入字段的值。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery val() Method</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoInput").val("https://www.delftstack.com/");
});
</script>
</head>
<body>
<h1> jQuery Val() Method</h1>
<label>Enter Your Site:</label>
<input type="text" id="DemoInput">
</body>
</html>
上面的代码会将给定输入的值设置为 https://www.delftstack.com/。
输出：
让我们使用带有函数的 val() 方法。
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery val() Method</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h1> jQuery Val() Method</h1>
<p>Type anything and it will be converted into Uppercase.</p>
<p>Type and click outside.</p>
<input type="text" placeholder="type anything">
<script>
$( "input" ).on( "blur", function() {
$( this ).val(function( x, Input_Value ) {
return Input_Value.toUpperCase();
});
});
</script>
</body>
</html>
上面的代码会将输入字段的值转换为大写。
输出：
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook