menu
menu

入力したら有効になるボタン | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook11
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter0

入力したら有効になるボタン

  • Labs

jQuery

こんにちは(・∀・)

 今回はinput要素やtextarea要素に文字が入力されたら有効になるボタンのサンプルをご紹介します。前回ご紹介しました、ラジオボタンやチェックボックスがチェックされたら表示されるリンクボタンのサンプルと内容はほぼ一緒です。


1. input要素のサンプル

 input要素に文字を入力すると「送信」のボタンが有効になります。


サンプルデモ

サンプルデモはこちら!


HTML

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<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);
}
});
});

 input要素に文字を2文字以上入力しないと「Submit」のボタンリンクが有効になりません。数値を変更したい場合はJavaScript内の「.length < 2)」の数値を変更してください。


2. textarea要素のサンプル

 textarea要素に文字を入力すると「送信」のボタンが有効になります。


サンプルデモ

サンプルデモはこちら!


HTML

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<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);
}
});
});

 textarea要素に文字を5文字以上入力しないと「Submit」のボタンリンクが有効になりません。数値を変更したい場合はJavaScript内の「.length < 5)」の数値を変更してください。


 いかがでしたでしょうか。ボタン系と同じく、こちらも導入はとても簡単です。よろしければご活用ください。


関連リンク

 チェックしたら表示されるリンク

 input要素【HTMLリファレンス】

 textarea要素【HTMLリファレンス】

  • カテゴリー:Labs
  • facebook11
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter0