美文网首页
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