今日の技術

今回は HTML5 で実装されている、placeholder の実装を非対応ブラウザで実現してみましょう。

HTML5 に対応していないモダンブラウザと言えば、ひとつしかありません。
それに Firefox 3.6 まだ配布しているでしょうか?こちらも検証してみたいと思います。

まず placeholder のサポート判定ですが、以下の記述を使いましょう。

if(document.createElement('input').placeholder !== undefined) {
 return;
}

比較的簡単に実装する場合、テキストボックスの未入力時に、灰色で文字を表示する、
また、フォーカスがあたると非表示にする対応が考えられます。

この実装方法は、該当項目が必須であれば問題ありません。
必須でないときは、灰色で表示されている文字列で次の画面に送られてしまいます。

回避策としては、テキストボックスの上に、文字列表示用の span を重ねてあげれば良さそうです。
フォーカス時には span を非表示に、フォーカス解除時はテキストボックスが空かどうかで
表示可否が決まります。

静的配置の上にspan を重ねる方法について、Firefox の実装方法は簡単です。
span を作成し、親要素の offsetLeft, offsetTop を style.left, style.top にあててやれば OK です。

span.style.left = txt.offsetLeft + 'px';
span.style.top = txt.offsetTop + 'px';

IE はひとクセあります。offsetLeft と offsetTop は親要素からの位置になっています。
親要素は offsetParent で取得でき、親要素をたどって、style.position が relative または absolute になっていない要素までの offsetLeft, offsetTop を加算していきます。

var left = 0;
var top = 0;
var elm = txt;
while (elm) {
 if (elm.currentStyle.position != 'relative' && elm.currentStyle.position != 'absolute') {
  left += elm.offsetLeft;
  top += elm.offsetTop;
 } else {
  break;
 }
 elm = elm.offsetParent;
}
span.style.left = left + 'px';
span.style.top = top + 'px';

今回はここまでです。

---

{a8.net http://books.livedoor.com/item/3481813}