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

<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); 
不太好用...
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.埋点是做什么的 2.如何进行埋点 3.埋点方案的设计 近期常被问到这个问题,我担心我的答案会将一些天真烂漫的孩...
    lxg阅读 2,029评论 0 1
  • @font-face{ font-family:"Times New Roman"; } @font-face{ ...
    niki阅读 532评论 0 1
  • 目录: Android:Android 0.*Android 1.*Android 2.*Android 3.*A...
    敲代码的令狐葱阅读 4,052评论 0 2
  • 本人刚学Python,有什么好的方法请在评论区提出,谢谢!!! from bs4import BeautifulS...
    zaneleo阅读 1,010评论 0 1
  • 《养生论语.内求篇》 文:诚明子 学生问曰:常听师言养生之内求,学生愚钝,不知内求者何也?诚明子曰:...
    诚明子阅读 655评论 4 2