jQueryを利用してテキストボックスに文字列を設定するコードを紹介します。
概要
jQueryを利用してテキストボックスに文字列の値を設定する場合には、val() メソッドを呼び出します。
プログラム
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var text = "ぺんぎん";
$("#Text1").val(text);
})
})
</script>
</body>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<div id="output"></div>
</html>
解説
jQueryを利用してテキストボックスの値を設定する場合には、セレクタで対象となるテキストボックスのオブジェクトを選択し、オブジェクトのvalメソッドを呼び出します。メソッドの引数に設定したい値を与えます。
今回のコード例の場合
var text = "ぺんぎん";
$("#Text1").val(text);
において、IDが"Text1"である要素のテキストボックスに text変数の内容を設定します。text変数には前行で"ぺんぎん"の文字列が代入されているため、テキストボックスには"ぺんぎん"の値が表示されます。
実行結果
上記のHTMLファイルをWebブラウザに表示します。下図のが面が表示されます。
ボタンをクリックします。テキストボックスに"ぺんぎん"の文字列が設定されます。
テキストボックスに値を設定することができました。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2017-04-27
