3月更新・前月(2月)の人気記事トップ10 03/01/2023
- ( 01 – ) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 02 – ) 【Mac】MacにGoogle Driveをインストール
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 05 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 05 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
- ( 07 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 08 – ) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
- (圏外↑) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
- ( 09 ↓) 【jQuery】入門5. jQueryで日時を表示
【Labs】入力したら有効になるリンクボタン
こんにちは(・∀・)
今回はinput要素やtextarea要素に文字が入力されたら有効になるボタンのサンプルをご紹介します。
前回ご紹介しました、ラジオボタンやチェックボックスがチェックされたら表示されるリンクボタンのサンプルと内容はほぼ一緒です。
Contents
1. input要素のサンプル
input要素に文字を入力すると「送信」のボタンが有効になります。
すべてのサンプルで使用します。
Google Hosted LibrariesからjQuery 1.x snippetを<head>
内に読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML
<p>
<input type="text" id="input1" autocomplete="off">
<input type="submit" id="submit1" value="送信">
</p>
JavaScript
$(function(){
if ($("#input1").val().length == 0) {
$("#submit1").prop("disabled", true);
}
$("#input1").on("keydown keyup keypress change", function() {
if ($(this).val().length < 2) {
$("#submit1").prop("disabled", true);
} else {
$("#submit1").prop("disabled", false);
}
});
});
Result
input要素に文字を2文字以上入力しないと「Submit」のボタンリンクが有効になりません。数値を変更したい場合はJavaScript内の「.length < 2)」の数値を変更してください。
2. textarea要素のサンプル
textarea要素に文字を入力すると「送信」のボタンが有効になります。
HTML
<p>
<textarea name="text2" id="text2" autocomplete="off"></textarea>
<input type="submit" id="submit2" value="送信">
</p>
JavaScript
$(function(){
if ($("#text2").val().length == 0) {
$("#submit2").prop("disabled", true);
}
$("#text2").on("keydown keyup keypress change", function() {
if ($(this).val().length < 5) {
$("#submit2").prop("disabled", true);
} else {
$("#submit2").prop("disabled", false);
}
});
});
Result
textarea要素に文字を5文字以上入力しないと「Submit」のボタンリンクが有効になりません。数値を変更したい場合はJavaScript内の「.length < 5)」の数値を変更してください。
いかがでしたか、ボタン系と同じくこちらも導入はとても簡単です。よろしければご活用ください。
関連リンク
【Labs】チェックしたら有効になるリンクボタン2
【HTMLリファレンス】input要素
【HTMLリファレンス】textarea要素