フォームの初期文章を自動的にクリアするようにしてみた。
2009年01月21日 18時46分
月齢:25.0[二十六夜] 潮汐:若潮
(最終更新日:2019年08月26日)
16年前に投稿 | WordPress | コメントはありません
5分ぐらいで読めます。
この記事は情報が古い場合があります。
当サイトを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(); ?> »</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>
という感じですー。
古い記事・新しい記事
- 古い記事 [2009年01月15日]
- ← WordPressのコメント欄で使えるタグをさらに制限する。
- 新しい記事 [2009年01月22日]
- → WordPressにプラグインPopular Postsを入れてみた。
他にも「WordPress」カテゴリの記事はいかがですか。
- WordPressプラグイン MoonPhaseの実装。
- WordPressでthe_archive_titleの余計な文字列「月別: 」を消して、さらにアーカイブページの「yyyy年m月」を「yyyy年mm月」と月をいつも2桁になるよう変更してみた。
- WordPress プラグイン「famous 100 poems」公開。
- WordPress2.8 リリース。変更点は?
- WordPress4.2以降の絵文字対応を無効化する。
- WordPress2.9.2にしました。
- WordPressのデフォルトユーザー「admin」を削除する。
- WordPressコメント欄URLを自動的にハイパーリンクにする。
- リンク部分にマウスカーソルを乗せると動くようにしてみた。
- WordPressのテーマファイル「white-album」