HOWTO · jQuery
在 jQuery 中設定輸入值
本教程演示如何在 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>
上面的程式碼會將輸入欄位的值轉換為大寫。
輸出：
