<textarea> には初期値となるテキストを指定しておきましょう。

Another HTML-lint gatewayでチェックすると個別ページで

「<textarea> には初期値となるテキストを指定しておきましょう。」

っていわれる。
入力用フォームなら初期値とか要らない気がするんだが、何かしら文字を出しておくのも悪くないかなと思って初期値を入れてみることにした。

1
2
3

    <p>
        <textarea name="comment" id="comment" cols="45" rows="10" tabindex="4">コメントして下さい。</textarea>
    </p>

テーマのcomments.phpに上記のように初期値を追加。
これで、100点だ。

しかし、このままだとボタンを押されると「コメントして下さい。」の文字が送信されてしまう。
そこの制御はJavascriptさんに任せることにします。

上の検索フォームで使ってるソースを流用。*1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function(){
  var defmsg = 'コメントして下さい。';
  $('#comment').blur(function(){
      var $$=$(this);
      if($$.val()=='' || defmsg==$$.attr('value')){
        $$.css('color', '#7F7F7F').val(defmsg);
      }
    })
    .focus(function(){
      var $$=$(this);
      if(defmsg==$$.attr('value')){
        $(this).css('color', '#000000').val('');
      }
    })
    .parents('form:first').submit(function(){
      var $$=$('#comment');
      if(defmsg==$$.attr('value')){
        $$.triggerHandler('focus');
      }
    }).end()
    .blur();
});

これで、フォームがアクティブになると「コメントして下さい。」の文字が消え。
かつ、初期値のままでは投稿できないようになりましたとさ。

脚注

  1. jQueryを使用 [戻る]
カテゴリー： WordPress
タグ： /. /.
コメント： 0件
投稿日時： 2009年07月19日 04:08
最終更新日時： 2012年01月30日 20:32
上へ参ります。