2009年10月30日
フォームで使う命令focus(),blur()
ASCII.jp：jQueryによるフォームのデザインの基礎（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
focus()命令とblur()命令で、フォーカスされた時／外れた時の挙動を制御できます。
以下はフォーカスされたテキストフィールドの文字を消して背景の色を変えます。
フォーカスが外れると背景色は元に戻ります。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
focus()命令とblur()命令で、フォーカスされた時／外れた時の挙動を制御できます。
以下はフォーカスされたテキストフィールドの文字を消して背景の色を変えます。
フォーカスが外れると背景色は元に戻ります。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#focus input").focus(function(){
$(this).css("backgroundColor","#ffffcf");
}).one("focus",function(){
$(this).val("");
});
$("#focus input").blur(function(){
$(this).css("backgroundColor","#fff");
});
})
</script>
<div id="focus">
<form>
<p>記入事項1：<input type="text" value="例1" /><br />
記入事項2：<input type="text" value="例2" /><br />
記入事項3：<input type="text" value="例3" /></p>
</form>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 13:28│Comments(0)
│jQuery
