jQueryのテキストボックスの値を取得/設定するサンプルです。
目次
| サンプル | テキストボックスの値を取得する |
| テキストボックスに値を設定する | |
| 入力不可にする(disabled) | |
| 読み取り専用にする(readonly) | |
| disabledとreadOnlyの違い |
テキストボックスの値を取得する
ボタンを押すとテキストボックスの値を取得するサンプルです。値の変更も可能です。
取得した値
上記サンプルのコードです。
<p>取得した値 <span id="span1"></span></p>
<input type="text" value="red" id="text1" maxlength="5" />
<input type="button" id="button1" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#button1").click(function () {
const str1 = $("#text1").val(); // テキストボックスのvalue値を取得
$("#span1").text(str1); // spanタグに値を設定
});
</script>
2行目は、「input type="text"」があるのでテキストボックスです。
8行目は、IDセレクタのtext1で対象を特定(2行目)しvalメソッドでvalue値を取得しています。
9行目は、value値を画面に表示しています。
idを指定しない場合
idを指定しない場合は、フォームとnameを指定します。
<p>取得した値 <span id="span3"></span></p>
<input type="text" name="test3" value="red" maxlength="5">
<input type="button" id="button5" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#button5").click(function() {
const str1 = $('input:text[name="test3"]').val();
$("#span3").text(str1);
});
</script>8行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(2行目)して、valメソッドでvalue値を取得し変数「str1」に代入します。
テキストボックスに値を設定する
ボタンを押すとテキストボックスに値を設定するサンプルです。
上記サンプルのコードです。
<input type="text" value="blue" id="text2" maxlength="5" />
<input type="button" id="button3" value="ボタン" />
<input type="button" id="button4" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#button3").click(function () {
$("#text2").val("red"); // テキストボックスに値を設定
});
$("#button4").click(function () {
$("#text2").val(""); // クリア
});
</script>
1行目は、テキストボックスです。id="text2"があります。
8行目は、IDセレクタのtext2で対象を特定(1行目)しvalメソッドでvalue値を設定しています。
idを指定しない場合
idを指定しない場合は、フォームとnameを指定します。
<input type="text" name="test4" value="green" maxlength="5" />
<input type="button" id="button7" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#button7").click(function () {
$('input:text[name="test4"]').val("red");
});
</script>
1行目は、テキストボックスです。
7行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(1行目)して、valメソッドでvalue値に値「red」を代入しています。
セレクタ
以下は、上記コードで使用しているセレクタです。
input・・・要素セレクタ
:text・・・jQueryの拡張セレクタ
[name="test1"]・・・属性セレクタ
jQuery セレクタのサンプル(変数/AND/OR)
入力不可にする(disabled)
上記サンプルのコードです。
<input type="text" value="red" id="text5" maxlength="5" />
<input type="button" id="button5" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#button5").click(function () {
if ($("#text5").prop("disabled")) {
$("#text5").prop("disabled", false);
} else {
$("#text5").prop("disabled", true);
}
});
</script>
7行目は、テキストボックスが入力不可か判定しています。
8行目は、入力不可の状態を解除します。
10行目は、入力不可にします。
読み取り専用にする(readonly)
状態：
上記サンプルのコードです。
<p>状態：<span id="span6"></span></p>
<input type="text" value="red" id="text6" maxlength="10" />
<input type="button" id="button6" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#button6").click(function () {
if ($("#text6").attr("readonly") == "readonly") {
$("#text6").attr("readonly", false);
$("#span6").text("書込可-readonlyでない");
} else {
$("#text6").attr("readonly", true);
$("#span6").text("書込不可-readonlyである");
}
});
</script>
8行目は、テキストボックスが読み取り専用か判定しています。
9行目は、入力不可の状態を解除します。
12行目は、入力不可にします。
disabledとreadOnlyの違い
両方とも画面からの入力は不可です。
WebシステムでPost送信したとき、disabledは値が送信されません。readOnlyは値が送信されます。
関連の記事