☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

Posted 贺小鸣

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Placeholder兼容各大浏览器的例子</title>
    <script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
    <div>
        <ul>
            <li>
                <input type="text" name="username" placeholder="用户名">
            </li>
            <li>
                <input type="password" name="username" placeholder="密码">
            </li>
            <li>
                <button type="button">登录</button>
            </li>
        </ul>
    </div>
</form>
</body>
</html>


<!--以下就是代码也可以单独起个名字，使用link在头部引用-->

<script>
    /*
     * jQuery placeholder, fix for IE6,7,8,9
     * @author JENA
     * @since 20131115.1504
     * @website ishere.cn
     */
    var JPlaceHolder = {
        //检测
        _check : function(){
            return ‘placeholder‘ in document.createElement(‘input‘);
        },
        //初始化
        init : function(){
            if(!this._check()){
                this.fix();
            }
        },
        //修复
        fix : function(){
            jQuery(‘:input[placeholder]‘).each(function(index, element) {
                var self = $(this), txt = self.attr(‘placeholder‘);
                self.wrap($(‘<div></div>‘).css({position:‘relative‘, zoom:‘1‘, border:‘none‘, background:‘none‘, padding:‘none‘, margin:‘none‘}));
                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css(‘padding-left‘);
                var holder = $(‘<span></span>‘).text(txt).css({position:‘absolute‘, left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:‘#aaa‘}).appendTo(self.parent());
                self.focusin(function(e) {
                    holder.hide();
                }).focusout(function(e) {
                    if(!self.val()){
                        holder.show();
                    }
                });
                holder.click(function(e) {
                    holder.hide();
                    self.focus();
                });
            });
        }
    };
    //执行
    jQuery(function(){
        JPlaceHolder.init();
    });
</script>

亲测，IE各版本都支持

以上是关于☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆的主要内容，如果未能解决你的问题，请参考以下文章

ie上如何兼容placeholder

判断浏览器是否支持某些新属性---placeholder兼容问题解决

低版本IE浏览器不兼容placeholder解决方法

解决输入框placeholder属性不兼容IE9及以下浏览器问题

placeholder的兼容处理

placeholder的兼容处理