placeholder – 有爱前端

发现非常好用的placeholder IE低版本竟然不支持，只有使用js来做placeholder效果了。大家看看代码有坑没

<input type="text" placeholder="请输入关键字">
<script>
    $(function(){
        $('input').placeholder();
    })
</script>

input{
    display: block;
    width: 200px; height: 28px;
    *line-height: 28px;
    line-height: 28px\9;
    padding: 2px 5px;
    margin: 0 auto;
    outline: none;
    border: 1px solid #c2c2c2;
}

     $.fn.extend({
    　　placeholder : function () {
    　　　　if ("placeholder" in document.createElement("input")) {
    　　　　　　return this
    　　　　} else {
    　　　　　　return this.each(function () {
    　　　　　　　　var _this = $(this), color = _this.css('color');
    　　　　　　　　_this.val(_this.attr("placeholder")).css('color','#a9a9a9').focus(function () {
    　　　　　　　　if (_this.val() === _this.attr("placeholder")) {
    　　　　　　　　　　 _this.val("").css('color', color);
    　　　　　　　　}
    　　　　　　　　}).blur(function () {
    　　　　　　　　　　if (_this.val().length === 0) {
    　　　　　　　　　　　　_this.val(_this.attr("placeholder"));
    　　　　　　　　　　　　_this.css('color','#a9a9a9');
    　　　　　　　　　　}
    　　　　　　　　})
    　　　　　　})
    　　　　}
    　　}
    });

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>placeholder</title> <style> <input type="text" placeholder="请输入关键字"> <script> $(function(){ $('input').placeholder(); }) </script> </style> </head> <body> <input type="text" placeholder="请输入关键字"> <script> $(function(){ $('input').placeholder(); }) </script> <script> $.fn.extend({ 　　placeholder : function () { 　　　　if ("placeholder" in document.createElement("input")) { 　　　　　　return this 　　　　} else { 　　　　　　return this.each(function () { 　　　　　　　　var _this = $(this), color = _this.css('color'); 　　　　　　　　_this.val(_this.attr("placeholder")).css('color','#a9a9a9').focus(function () { 　　　　　　　　if (_this.val() === _this.attr("placeholder")) { 　　　　　　　　　　 _this.val("").css('color', color); 　　　　　　　　} 　　　　　　　　}).blur(function () { 　　　　　　　　　　if (_this.val().length === 0) { 　　　　　　　　　　　　_this.val(_this.attr("placeholder")); 　　　　　　　　　　　　_this.css('color','#a9a9a9'); 　　　　　　　　　　} 　　　　　　　　}) 　　　　　　}) 　　　　} 　　} }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » placeholder