HOWTO · jQuery
jQuery で入力値を設定する
このチュートリアルでは、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>
上記のコードは、入力フィールドの値を大文字に変換します。
出力：
