在 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