input获取焦点时移除placeholder，失去焦点重新获得placeholder内容

image.png

方法1

input:focus::-webkit-input-placeholder{
color: transparent;
}

方法2

var arrplaceholder = [1,1,1,1];
$("input").focus(function(){
    if(!!!$(this).prop("readonly")){
        $(this).prop("placeholder", "")
    }
});
$("input").blur(function(){
    $(this).prop("placeholder", arrplaceholder[$(this).index()])
});

方法3

方法4

(function($) {  
    $.fn.extend({  
        placeholder: function() {  
            if ("placeholder" in document.createElement("input")) {  
                return this //如果原生支持placeholder属性，则返回对象本身  
            } else {  
                return this.each(function() {  
                    var _this = $(this);  
                    _this.val(_this.attr("placeholder")).focus(function() {  
                        if (_this.val() === _this.attr("placeholder")) {  
                            _this.val("")  
                        }  
                    }).blur(function() {  
                        if (_this.val().length === 0) {  
                            _this.val(_this.attr("placeholder"))  
                        }  
                    })  
                })  
            }  
        }  
    })  
})(jQuery); 
不太好用...