jQuery で入力値を設定する
val() メソッドを jQuery で使用して、jQuery の入力フィールドの値を設定できます。このチュートリアルでは、val() メソッドを使用して jQuery の入力フィールドの値を設定する方法を示します。
jQuery で入力値を設定する
val() は、指定された要素の値を返したり設定したりするために使用される jQuery の組み込みメソッドです。このメソッドが値を返す場合、それは最初に選択された要素の値になります。
このメソッドを使用して要素の値を設定する場合、その値を 1つ以上の要素に設定できます。この方法は、3つの異なる方法で使用できます。
-
まず、要素の値を返します。
構文：
$(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