コードDJ 第5回 – ウォーターマークが消えなければ消せばいいじゃない

2010 /06/29

komagata

毎週火曜日、Help me, hackers!に上がったコードを紹介していくコードDJ 第5回。

TimeMachineで自動バックアップを取っていても結局クリーンインストール後は手でデータを復旧させる昭和の男、komagata a.k.a. DJです。

今回はコレ、フォームのデフォルトの文字をフォーカスが移ったら消す – Help me, hackers!

コレの経緯はこんな感じだ。

F5V a.k.a. PHPerよりHam CutletにTwitter経由で上記の要望が入る。
DJが要望をHelp me, hacekrs!に登録する。
mongorian_chop a.k.a. 自由人からjQuery Watermark Pluginの情報を貰う。
USTREAMの開発生放送でDJが上記プラグインでの実装に敗北。
見るに見かねたmongorian_chopが実装してpull request。

１００万語の言葉より１つのpull request。コードは偉大だ。

「コード！コード！コード！」

「よし、ならばコードだ。」

今回のキモはココ。

views/index.haml at c7cf55da11f2131568deda5b1d4b7a46742943f8 from mongorian-chop’s hamcutlet – GitHub

$(document).ready(function(){
    $.updnWatermark.attachAll();
    $('.updnWatermark > label').click(function(){
        $(this).toggle();
        $("textarea").select();
    }).blur(function(){
        $(this).toggle();
    });
});

$(document).ready(function(){ … }) はお馴染み、DOMの構築が終わった瞬間に実行してくれるjQueryの書き方だ。$(function() { … }) でも同じ。画像の読み込み等を待たない分、onloadより速いのでjQuerystはドンドン使ってこ！

今回、DJが挫折してたのはjQuery Watermark Pluginをtextareaに使った時に、そのWatermarkのテキスト自身をクリックした場合にWatermakが消えないところだ。

mongorian_chopはそこをちゃんと消すコードを書いてくれた。ありがとう！

jQueryだとちょっと面倒に思えた処理もこんなにスマートな見た目で書けるなんて。DJこの連載のおかげで強制的にJS勉強させられてるね！

DJ、今現在もHelp me, hacekers!上で複数のコード野郎共とコラボ中だ。議論する暇があったらコードを送りつけろ！