■なにが難しいのか？
ボタンがクリックされたら、何かしたい・・・なら簡単。
ボタンクリックのイベントがとれるから。
しかし、ボタンがdisabledになったら・・・というイベントがない。
なので、ボタンがdisabledになったら、何かしたいというのがかけない。
■どうしたか
ボタンをdisabledに直接するのではなく、
いったんボタンをblurにして、ボタンのblurイベント内でdisableにして、
そこに、disableのときにしたい処理を書いた
■サンプル
こんなかんじ。disabledのときに、背景を赤にしている
■つけたし・・
blurにするより、カスタムイベントにしたほうがいいかも？
ボタンがクリックされたら、何かしたい・・・なら簡単。
ボタンクリックのイベントがとれるから。
しかし、ボタンがdisabledになったら・・・というイベントがない。
なので、ボタンがdisabledになったら、何かしたいというのがかけない。
■どうしたか
ボタンをdisabledに直接するのではなく、
いったんボタンをblurにして、ボタンのblurイベント内でdisableにして、
そこに、disableのときにしたい処理を書いた
■サンプル
こんなかんじ。disabledのときに、背景を赤にしている
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
// フォーカスを受け取ったら、enable
$("#myarea").focus(function(){
$("#myarea").css("background-color", "yellow");
$("#bt1").removeAttr('disabled');
});
// フォーカスを失ったら、blur(→disable）
$("#myarea").blur(function(){
$("#bt1").blur();
});
// ボタンがdisableになったら、背景を変える
$("#bt1").blur(function(){
$("#myarea").css("background-color", "red");
$("#bt1").attr("disabled",true);
});
});
</script>
<body>
<div id="myarea" style="width:200px;height:100px;background-color:yellow;">
<BUTTON id="bt1" >ボタン</BUTTON>
</div>
</body>
</html>
|
■つけたし・・
blurにするより、カスタムイベントにしたほうがいいかも？
アクセス
トータル
ランキング
