placeholder實現的兩種方式

/*

*

* placeholder元件

* $(input).placeholder()
* * note：
*   evttype預設是focus，即滑鼠點選到輸入域時預設文字消失，keydown則模擬html5 placeholder屬性在firefox/chrome裡的特徵，游標定位到輸入域後鍵盤輸入時預設文字才消失。
*   此外，對於html5 placeholder屬性，ie10+和firefox/chrome/safari的表現形式也不一致，因此內部實現不採用原生placeholder屬性 */
$.fn.placeholder = function
(option, callback) , option)
function
bootstrap($that) ).val(word)
} else
)        }
function
switchstatus(isdef) )   
} else
)            }
}function
asfocus() 
}).bind('blur', function
()             })
}function
askeydown() )
}, 10)                 }})
}if (evttype == 'focus')  
else
if (evttype == 'keydown') 
//keydown事件裡處理placeholder
$that.keydown(function
()         }).keyup(
function
() )}})
}return
this.each(function
() )
}

$.fn.placeholder = function

(option, callback) , option)
function
bootstrap($that) ).text(word).hide()
//位置調整
move()
//textarea 不加line-heihgt屬性
if ($that.is('input')) )
}//內容為空時才顯示，比如重新整理頁面輸入域已經填入了內容時
var val =$that.val()
if ( val == '' && $that.is(':visible') ) 
function
hideandfocus() 
function
move() )
}function
asfocus() , 100)
})//ie有些bug，原本不用加此句
$that.click(hideandfocus)
$that.blur(
function
()             })
}function
askeydown() )
}if (evttype == 'focus')  
else
if (evttype == 'keydown') 
$that.keyup(
function
()  
else
})//視窗縮放時處理
$(window).resize(function
() )
//cache
$that.data('el', $placeholder)
$that.data('move', move)
}return
this.each(function
() )
}

兩種方式的思路

(方式一)使用input的value作為顯示文字

(方式二)不使用value，新增乙個額外的標籤（span）到body裡然後絕對定位覆蓋到input上面

實現表單元素的placeholder效果

在h5中給input標籤新增了乙個佔位符屬性placeholder用來做提示文字 可是我想在其他元素裡使用這個屬性，那怎麼辦呢 1.新建乙個div讓它變成可編輯狀態 css test html contenteditable是h5中新新增的全域性屬性，contenteditable屬性可以讓元素變為...

實現跨瀏覽器的placeholder,相容IE7

1,首先規定一下placeholder的規則 1 文字框無內容失去焦點時,顯示placeher的文字 一般是灰色字型 2 文字框聚焦時 還沒有輸入內容 placeher將消失,即文字框空白 3 文字框輸入內容時,placeholder也消失 4 文字框失去焦點時若有內容,則不顯示placeholde...

修改placeholder的樣式

在input框中有時想將輸入的字和placeholder設為不同的顏色或其它效果，這時就可以用以下 來對placeholder進行樣式設定了。1 webkit input placeholder 使用webkit核心的瀏覽器 2 moz placeholder firefox版本4 18 3 moz...