javascriptテキストボックスウォーターマーク/プレースホルダの実現方法

7379 ワード
Firefox/Chrome/Operaはあるバージョンからこの特性をサポートしていますが、ieシリーズはie 9であってもサポートしていませんので、Javascriptを通じて(通って)placholder特性をサポートしていないブラウザに対応する必要があります.
普遍的なやり方
現在一般的に使われているやり方はフォーム要素のonfocus/onblurイベントによってvalueの値を変えます.
 
  
 
  
 
  <br>var el = document.getElementById("text1"); 
  <br>if (el.value == "") 
  <br>el.value = "    "; 
  <br> 
  <br>el.onfocus = function() { 
  <br>if (this.value == "    ") 
  <br>this.value = ""; 
  <br>}; 
  <br>el.onblur = function() { 
  <br>if (this.value == "") 
  <br>this.value = "    "; 
  <br>} 
  <br>
jQueryの各watermarkプラグイン(http://archive.plugins.jquery.com/plugin-tags/watermark)多くはこのようなやり方を採用しており、またいくつかの様式を設定するなどの操作があるかもしれません.
このようなやり方は直接フォーム要素を操作して、便利で速くて実用的です.
しかし、弊害もあります.
いくつかの操作は、フォーム要素のvalue値を傍受することによって機能を実現する必要があります.
フォームの送信には値をクリアする必要があります.
もちろん他にも弊害があるかもしれません.ここでは取り上げません.
より良いやり方
不必要なトラブルを避けるためには、フォーム要素のvalue値を変更することが避けられます.
まず、次のテキストボックスがあれば、
テキストボックスの値を変えることができない以上、spanまたは他の要素を追加することによって、テキストボックスの上に絶対的な位置付けをし、外枠にpositionを追加します.relativeの容器を包装します.ヒント情報にオフセットが発生しないようにします.
無意識のうちにタオバオの登録ページは別にposition:relativeの容器を入れて包装してもオフセットが発生しないことを発見しました.だから、提示情報のマークをテキストボックスの前に置くだけでいいです.
このようにして生まれたマークはもっと簡潔です.
対応するスタイル
最終的に表示されるマークが決定された以上、現在はそれぞれのスタイルを定義し、より美しく見えるようにする必要があります.
 
  
/*         style */ 
  
.w-label { 
  
position: absolute; 
  
padding: 0 0 0 6px; 
  
margin: 0; 
  
font-size: .8em; 
  
color: #999; 
  
opacity: 1; 
  
} 
  
/*      */ 
  
.w-hide { 
  
visibility: hidden; 
  
opacity: 0; 
  
} 
  
/*          ，      */ 
  
.w-active { 
  
color: #ddd; 
  
}
では、これに応じて、
関連スクリプト
フォーム要素のvalue値を変更して効果を実現する必要はないが、Ofocus/onblurイベントによってヒント情報のタグを制御する必要があり、すべては以下のように実現される.
 
  
/*      */ 
  
var addEvent = document.addEventListener ? 
  
function(element, type, fn) { 
  
element.addEventListener(type, fn, false); 
  
} : 
  
function(element, type, fn) { 
  
element.attachEvent("on" + type, fn); 
  
}, 
  
/*        */ 
  
removeEvent = document.removeEventListener ? 
  
function(element, type, fn) { 
  
element.removeEventListener(type, fn, false); 
  
} : 
  
function(element, type, fn) { 
  
element.detachEvent("on" + type, fn); 
  
}, 
  
/*      /    */ 
  
watermark = function(element, text) { 
  
if (!(this instanceof watermark)) 
  
return new watermark(element, text); 
  
var place = document.createElement("span");//       
  
element.parentNode.insertBefore(place, element);//             
  
place.className = "w-label"; 
  
place.innerHTML = text; 
  
place.style.height = place.style.lineHeight = element.offsetHeight + "px";//    、      
  
element.place = this; 
  
function hideIfHasValue() { 
  
if (element.value && place.className.indexOf("w-hide") == -1) 
  
place.className += " w-hide"; 
  
} 
  
function onFocus() { 
  
hideIfHasValue() 
  
if (!element.value && place.className.indexOf("w-active") == -1) 
  
place.className += " w-active"; 
  
} 
  
function onBlur() { 
  
if (!element.value) { 
  
place.className = place.className.replace(" w-active", ""); 
  
place.className = place.className.replace(" w-hide", ""); 
  
} 
  
} 
  
function onClick() { 
  
hideIfHasValue(); 
  
try { 
  
element.focus && element.focus(); 
  
} catch (ex) {} 
  
} 
  
//        
  
hideIfHasValue(); 
  
addEvent(element, "focus", onFocus); 
  
addEvent(element, "blur", onBlur); 
  
addEvent(element, "keyup", hideIfHasValue); 
  
addEvent(place, "click", onClick); 
  
//   watermark 
  
this.unload = function() { 
  
removeEvent(element, "focus", onFocus); 
  
removeEvent(element, "blur", onBlur); 
  
removeEvent(element, "keyup", hideIfHasValue); 
  
removeEvent(place, "click", onClick); 
  
element.parentNode.removeChild(place); 
  
element.place = null; 
  
}; 
  
};
上記のコードは、フォーム要素のfocus/blur/keyupイベントによって、提示情報フラグの表示、非表示、およびスタイルを制御します.また、情報マークを提示するclickイベントによって隠し、フォーム要素に焦点を合わせます.
最後にunload方法を提供してwatermarkをキャンセルします.
具体的に使う
以上のjsとcssがあれば、直接にそれらを使ってwatermark機能を実現できます.
 
  
 
  
 
  
 
  <br>var m1 = watermark(document.getElementById("text1"), "    "); 
  <br>addEvent(document.getElementById("button1"), "click", function() { 
  <br>m1.unload(); 
  <br>}); 
  <br>
httml 5 plceholder互換
以上の実現がある以上、httml 5 placceholderをサポートしていない対応のブラウザも簡単です.まず、ブラウザがplacceholderをサポートしているかどうかを判断する必要があります.

   var html5support = "placeholder" in document.createElement("input");
次に、httml 5 plocholderに対応していないブラウザに対して、フォーム要素を抽出するプレースホルダの内容は、以下のように実現される.
 
  
placeHolderForm = function(form) { 
  
var ph, elems = form.elements, 
  
html5support = "placeholder" in document.createElement("input"); 
  
if (!html5support) { 
  
for (var i = 0, l = elems.length; i < l; i++) { 
  
ph = elems[i].getAttribute("placeholder"); 
  
if (ph) elems[i].ph = watermark(elems[i], ph); 
  
} 
  
} 
  
}
デモコードは以下の通りです.
 
  
 
  
 
  
    html5 placeholder       watermark 
  
     
  
  •  
  
       ： 
  
     
  
    •  
  
  •  
  
       ： 
  
     
  
    •  
  
  •  
  
        ：
JavaScriptオブジェクトについてのダイナミックな選択とオブジェクト遍歴