今日の技術

今回は HTML5 の placeholder に対応していないブラウザ(IE)で、
プレースホルダーのような仕組について検証しています。

前回は span をテキストボックスの前面に配置するところまで行ないました。

今回は、動きについて解説します。

テキストボックスの前面に置いたプレースホルダーは、
下記の特徴を持っていなければ、使い勝手がよくありません。
・クリックできない
・ドラッグできない

そこで、クリックイベントとドラッグイベントで、
テキストボックスにフォーカスを移すようにすればいいと思います。

// span は定義済みのプレースホルダー
// txt は対象のテキストボックス
// クリック防止
span.onclick = function() {
 txt.focus();
 return false;
};
// ドラッグ防止
span.ondrugstart = function() {
 txt.focus();
 return false;
};
span.style.MozUserSelect = 'none';
span.style.userSelect = 'none';
// span 表示・非表示
txt.onfocus = function() {
 span.display = 'none';
};
txt.onblur = function() {
 if(txt.value) {
  span.style.display = 'none';
 } else {
  span.style.display = 'inline';
 }
};

クリックイベントは、span をクリックしたときに、テキストボックスにフォーカスを移します。
ドラッグ開始イベントは、 span をドラッグしようとしたタイミングでドラッグを解除し、テキストボックスにフォーカスを移します。
テキストボックスにフォーカスを移すと、span は非表示になります。
テキストボックスからフォーカスを外すと、値が入っている場合は非表示のままで、空だった場合は span を再表示させます。　
span を再表示させる場合は、inline を指定します。

---

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