フォーカスするとtextareaの文字がクリアされるアレ

以前から僕のブログのコメント欄(textarea)では「コメントはお気軽にどうぞ」とあらかじめ初期値となる文字を入れてあります。

これは、Another HTML-lintでも次のとおり解説されているとおり、ちゃんと理由があってのこと。まあ単純に親切だからというのもありますけど。

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

Another HTML-lint 結果の解説より引用

で、これをコメント入力の際にいちいち手作業でクリアするのは面倒だということで、僕はこれまでJavaScriptのonfocus属性を用いてtextareaがフォーカスされると初期値の文字がクリアされるようにしてきたんです。

ですが、最近になってそのコードに致命的なミスを発見。確かにフォーカスで初期値の文字は消えるんですが、何か文字を書いていて途中に別な場所をフォーカスしたのち、再びtextareaをフォーカスするとその途中まで書いた文字も全てクリアされてしまうんです。これに気がつかなかったせいで、一体どれほどの方にご迷惑をかけたことか・・・。まあ普段からコメント自体がさほど多くないので大きな問題ではないのかもしれないけどw

ということで、早速改善。textareaの属性を次のとおり書き換えました。

onfocus="if (this.value == '初期値') this.value = '';" onblur="if (this.value == '') this.value = '初期値';"

こうすることであらかじめ入力されていた初期値はフォーカスによってクリアされ、かつ別な場所をフォーカスした後で再びフォーカスが移っても文字は消えなくなりました。

なお、このコードはhxxk.jpさんを参考にさせて頂きました(というかまんまだ)。この場をお借りしてお礼申し上げます。

コメントを書く

Your email is never shared. * 印の項目は必須項目です。

*
*