煤式自動連結器

当サイトをAnother HTML-lintでチェックすると、

<INPUT type="text"> や <TEXTAREA> には、何か初期値となるようなテキストをあらかじめ書いておくことがWAIで薦められています。その理由に、空だと正しく処理できないWWWブラウザの可能性が示されています。

と、以前から指摘されていました。一時期、これを解消するために初期のテキストを入れたりしたのですが、ユーザーの視点で考えると「いちいち消してから入力するのは面倒」だと考えて、テキストボックスやテキストエリアにカーソルを移動すると勝手に初期の文章がクリアされるように、コメント欄と検索欄にJavaScriptを仕込んでみました。

参考にしたサイトは「フォーカスした際に、フォームの内容をクリアするやり方」です。参考っていうレベルではなく、真似に近いですが…。ありがたやありがたや。以下にWordPressに実際に仕込んだソースを晒します。上がheader.php、下がcomments.phpですー。

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p><input type="text" name="s" id="s" size="20" tabindex="1" accesskey="f" class="seachtext" onfocus="if (this.value == '文字を入れてネ。') this.value = '';" onblur="if (this.value == '') this.value = '文字を入れてネ。';" value="文字を入れてネ。" /><input type="submit" value="検索" class="searchbutton" tabindex="2" accesskey="s" /></p>
</form>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p><a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>でログイン中。<?php wp_loginout(); ?> &raquo;</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>名前 <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>メールアドレス(非公開) <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>ウェブサイト</small></label></p>
<?php endif; ?>
<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4" onfocus="if (this.value == 'コメントを入力して下さい。') this.value = '';" onblur="if (this.value == '') this.value = 'コメントを入力して下さい。';">コメントを入力して下さい。</textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="コメントを送信。" class="commentssend" /></p>
<p>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>

という感じですー。