実践演習-ガイドテキスト
ガイドテキスト - jQuery基本形
<form method="get" action="http://example.com/"> <input class="guideText" type="text" size="30" value="お名前を入力してください"> <textarea class="guideText" cols="30" rows="8">メッセージを入力してください</textarea> <input type="submit" value="送信"> </form>
$(function(){ $('.guideText').each(function(){ var guideText = this.defaultValue; var element = $(this); element.focus(function(){ if(element.val()===guideText){ element.val(''); element.removeClass('guide'); } }); element.blur(function(){ if(element.val()===''){ element.val(guideText); element.addClass('guide'); } }); if(element.val()===guideText){ element.addClass('guide'); } }); });
* { font-family: sans-serif; } body{ padding: 30px; } form{ padding: 0 0 10px; } form div{ padding: 0 0 3px; } .guide{ color: #CCC; } textarea{ display: block; width: 300px; margin: 5px 0 5px; }