美文网首页
input获取焦点时移除placeholder,失去焦点重新获得

input获取焦点时移除placeholder,失去焦点重新获得

作者: 木和土的杜 | 来源:发表于2019-10-09 10:55 被阅读0次
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

<body>
        <input id="test" placeholder="请输入"></input>
    </body>
    <script type="text/javascript">
        test.addEventListener('focus',function(){
            test.removeAttribute('placeholder')
        });
        test.addEventListener('blur',function(){
            test.setAttribute('placeholder','请输入')
        });
    </script>

方法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); 
不太好用...

相关文章

网友评论

      本文标题:input获取焦点时移除placeholder,失去焦点重新获得

      本文链接:https://www.haomeiwen.com/subject/ilwyjctx.html