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

最新推荐文章于 2022-11-04 10:12:10 发布

原创最新推荐文章于 2022-11-04 10:12:10 发布 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了四种清除HTML输入框占位符的方法，包括使用CSS伪元素、jQuery插件、JavaScript监听事件以及直接操作DOM属性。这些方法适用于不同场景，帮助开发者解决在用户聚焦输入框时清除占位符的问题。

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