2020-01-14

placeholder兼容IE浏览器

在做登录页面的过程中，发现登录用户名密码提示在IE下不显示，其实就是placeholder不兼容IE。

那要想在IE下显示提示内容该怎么办呢?

可以通过给input赋值为placeholder的值即可，而placeholder和value的样式往往不一样，只要设置两者样式相同即可。

我是修改的placeholder样式：代码如下：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #666;
  font-size: 20px;
  font-weight: bolder;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #666;
  font-size: 20px;
  font-weight: bolder;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #666;
  font-size: 20px;
  font-weight: bolder;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #666;
  font-size: 20px;
  font-weight: bolder;
}

兼容placeholder的js代码;

https://www.cnblogs.com/hanyining/p/5531861.html

 // 兼容IE下 placeholder 正常显示
    ;(function($){
        $.fn.placeholder = function(options){
            var opts = $.extend({}, $.fn.placeholder.defaults, options);
            var isIE = document.all ? true : false;
            return this.each(function(){
                var _this = this,
                    placeholderValue =_this.getAttribute("placeholder"); //缓存默认的placeholder值
                if(isIE){
                    _this.setAttribute("value",placeholderValue);
                    _this.onfocus = function(){
                        $.trim(_this.value) == placeholderValue ? _this.value = "" : '';
                    };
                    _this.onblur = function(){
                        $.trim(_this.value) == "" ? _this.value = placeholderValue : '';
                    };
                }
            });
        };
    })(jQuery);

使用方法： $('input').placeholder();
需要特别提出的是密码框的使用：如果直接使用，密码框失去焦点时会把提示显示为暗文（也就是 黑点），所以必须借助另外的输入框显示。

思路：密码框先设置隐藏，在密码框旁边用一个普通输入框，value赋值为提示内容，当光标进入时把输入框隐藏，显示密码框。当光标离开时隐藏密码框，显示输入框进行提示。

密码还是在密码框中输入，输入框只是充当placeholder的作用

html代码：

js代码：

中文和数字不能水平对齐，设置line-height就可以了。