解决360浏览器中input框字体颜色不变问题

1. html页面:

    <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>

2. 引入jquery.js

<script src="jquery-1.8.3.min.js"></script>

3. 接下来是页面中写入js

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();
});

4. 页面展示前后对比


猜你喜欢

转载自blog.csdn.net/u012054869/article/details/78924650
今日推荐