js は html5 プレースホルダーを模倣して、サポートされていないブラウザーに適応します_javascript スキル

HTML5 はプレースホルダーをネイティブにサポートしています (つまり、それをサポートしていない) ブラウザの場合は、js シミュレーションを使用できます。
js コード

コードをコピー コードは次のとおりです:

( function(){
//プレースホルダーがサポートされているかどうかを判断します
function isPlaceholer(){
var input = document.createElement('input');
return "placeholder" in input;
}
//サポートされていないコード
if(!isPlaceholer()){
//クラスを作成します
function Placeholder(obj){
this.input = obj; >this .label = document.createElement('label');
this.label.innerHTML = obj.getAttribute('placeholder');
this.label.style.cssText = 'position:absolute;インデント: 4px;color:#999999; font-size:12px;';
if(obj.value != ''){
this.label.style.display = 'none';
this.init();
}
Placeholder.prototype = {
//位置を取得します
getxy: function(obj){
var left, top; if(document .documentElement.getBoundingClientRect){
var html = document.documentElement,
body = document.body,
pos = obj.getBoundingClientRect(),
st = html.scrollTop || .scrollTop,
sl = html.scrollLeft || body.scrollLeft,
ct = html.clientTop || body.clientTop,
cl = html.clientLeft || pos.left sl - cl;
top = pos.top st - ct;
else{
while(obj){
left = obj.offsetLeft; obj.offsetTop ;
obj = obj.offsetParent;
}
return{
左: 左,
上 : 上
}
} >// 幅と高さを取得します
getwh : function(obj){
return {
w : obj.offsetWidth,
h : obj.offsetHeight
}
},
//幅と高さの値を追加します。メソッド
setStyles: function(obj,styles){
for(var p instyles){
obj.style[p] =styles[p] 'px';
}
},
init : function(){
var label = this.label,
input = this.input,
xy = this.getxy(input),
wh = this .getwh(input);
this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left , 'top': xy.top});
document.body.appendChild(label);
label.onclick = function(){
this.style.display = "none"; input.focus() ;
}
input.onfocus = function(){
label.style.display = "none";
input.onblur = function(){
if( this.value == ""){
label.style.display = "ブロック";
}
}
var inpColl = document.getElementsByTagName(' input'),
textColl = document.getElementsByTagName('textarea');
//HTML コレクションは配列に変換されます
function toArray(coll){
for(var) i = 0、a = [ ]、len = coll.length i ){
a[i] = coll[i];
var inpArr = toArray (inpColl),
textArr = toArray(textColl),
placeholderArr = inpArr.concat(textArr);
for (var i = 0; i if (placeholderArr[i].getAttribute('placeholder')){
new Placeholder(placeholderArr[i])
}
}
}
}) ()



html コード
:




コードをコピー


コードは次のとおりです

< ;br>

css コード:

コードをコピー


コードは次のとおりです:


div,input,textarea{ margin:0 ; パディング:0;}

div{width:400px; margin:100px auto 0;}
input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 plain;padding-left:2px;} textarea{ font-size:12px;なし;}