投稿可能な状態になると色が変わるボタンの作り方 – disableを利用
よく読まれている記事
このような一般的なフォームがあります。
投稿可能な状態になると色が変わるという機能をjQueryで作成してみます。
|
1 2 3 4 5 6 |
<form> <input type="text"> <input type="submit" value="検索"> </form> |
サンプル（送信されません）
作業内容
要望
投稿が可能になった時に、検索ボタンが動くような挙動にしたい。仕様
検索できない状態はdisable属性を付ける。１文字でも入力されたら、検索可能にする。
0文字になったら、disable属性を付ける。
IEでも動くようにする。
できなかったこと
IEでdisable属性を利用すると、cssで指定した表示になりません。ブラウザの持つ見た目になるので注意が必要です。
どういった動作になるかは、サンプルをご確認いただければ、すぐにわかるかと思います。
jQueryを確認してみよう！
jQueryを利用して機能を追加しました。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> $(function(){ var $text = $('input[type="text"]'), $button = $('input[type="submit"]'), disabled_class = 'disabled'; if($text.val().length == 0) { $button.prop('disabled',true).addClass('disabled'); } $text.bind('keydown keyup keypress change',function(){ var thisValueLength = $(this).val().length; if(thisValueLength > 0){ $button.prop('disabled',false).removeClass(disabled_class); }else{ $button.prop('disabled',true).addClass(disabled_class); } }); }); </script> |
行っている内容は、シンプルなので、１行ずつ確認していきましょう。
jQueryを解説します！
全て読み込まれたあとにjQueryを動かす準備をします|
1 |
$(function(){ |
変数「$text」に「$(‘.textArea’)」を代入します。
|
1 |
var $text = $('.textArea'), |
変数「$button」に「$(‘.submitBtn’)」を代入します。
|
1 |
$button = $('.submitBtn'), |
変数「disabled_class」に「’disabled’」を代入します。
変数が複数ある場合は、varを１回書けば、あとは、,で複数書くことができます。最後の,は不要です。
|
1 |
disabled_class = 'disabled'; |
もし、「$text.val」が0の時、次を実行してください。
|
1 |
if($text.val().length == 0) { |
「$button」にdisabledを付けて、さらに、disabledというclassも付けてください。
|
1 |
$button.prop('disabled',true).addClass('disabled'); |
条件ここまで。
|
1 |
} |
「$text」をkeydown keyup keypress changeのどれかがあった時に、
|
1 |
$text.bind('keydown keyup keypress change',function(){ |
あ、その前に。「「$text」をkeydown keyup keypress changeのどれかがあった時に」の「入力してあるテキスト」の「長さ」を、変数「thisValueLength」に代入してください。
|
1 |
var thisValueLength = $(this).val().length; |
もし、「thisValueLength」が0より多かったら、次を実行してください。
|
1 |
if(thisValueLength > 0){ |
「$button」についているdisabledを削除して、さらに、disabledというclassも削除してください。
|
1 |
$button.prop('disabled',false).removeClass(disabled_class); |
もし、「thisValueLength」が0より多かったら、以外の場合、（つまり０の時）
|
1 |
}else{ |
「$button」にdisabledを付けて、さらに、disabledというclassも付けてください。
|
1 |
$button.prop('disabled',true).addClass(disabled_class); |
条件ここまで。
|
1 |
} |
$text.bind(‘keydown keyup keypress change’,function()を閉じる。
|
1 |
}); |
$(function()を閉じる。
});
今回利用したCSSを見てみる
CSSも参考として書いておきます。CSSの補足説明
input[type=”text”]inputのうち、typeがtextのものを取得します。
input[type=”submit”]
inputのうち、typeがsubmitのものを取得します。
disabled属性
disabled属性を指定した要素を無効化します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* input reset */ input { padding: 0; background-color: none; border: 0; } /*テキストエリア*/ input[type="text"]{ padding: 0; width: 200px; height: 30px; border: 1px solid #ccc; line-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*検索ボタン*/ input[type="submit"]{ background: blue; color: #fff; width: 55px; height: 30px; border: 0; line-height: 30px; } input[type="submit"]:hover{ background: red; height: 30px; color: #fff; border: 0; cursor: pointer; } input[type="submit"].disabled{ background: #cdcdcd; cursor: default; } input[type="submit"].disabled:hover{ background: #cdcdcd; } |
サンプル（送信されません）
以上です。