フォームの初期文章を自動的にクリアするようにしてみた。
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でアイキャッチ画像を表示させるためプラグインを入れてテーマをいじってみた。
- WordPress 前の投稿・次の投稿へのリンクに日付を加えてみた。
- WordPressのコメント欄、ミステリーマンのアバターを好きなものに変更する。
- WordPressで、更新日の表示を予約投稿に対応させる。
- WordPress2.9にしてみました。
- WordPressに実装されているはずのレスポンシブイメージが機能しないのでもう一度確認してみた。
- WordPressでランダムに記事を表示させる。
- TinyMCEビジュアルエディタのフォントを明朝体から好きなフォントへ変更する。
- WordPressの既存テーマにfaviconを表示させてみる。
- WordPress テーマファイルをXHTML1.0 strictからHTML5に変換してみた。