修复ie8不支持placeholder，ie8适配实现placeholder的效果，展示时密码框显示文字输入时不明文显示密码

---

前言

产品要适配ie8，ie8不支持placeholder，但是代码中很多表单都有placeholder，不能挨个处理。因此想了一个全局处理的方式。在ie8下使用jquery实现placeholder的效果。并支持密码框的展示和密码明文隐藏功能。

---

一、参考方案

参考了该博主的文章，已经可以实现placeholder的效果，但是密码框在页面刚渲染好时，显示的提示文字是黑点，针对这个问题进行了优化。

二、初步方案

开始想着在密码框获得焦点时，修改input的框的type属性，但type属性不能被修改。

三、最终方案

最终方案是在页面渲染展示时使用text框，在输入密码时替换为password。代码如下：

//适配ie8 不支持placeholder
$(function(){
    
    
    function placeholderSupport() {
    
        // 判断浏览器是否支持  placeholder
        return 'placeholder' in document.createElement('input');
    }
    
    if(!placeholderSupport()){
    
    
        $(document).on('focus', '[placeholder]',function() {
    
    
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
    
    
                input.val('');
                input.removeClass('placeholder');
                
                if(input.hasClass('placeholderPassword')){
    
    //输入密码时替换成password类型,避免密码明文输入
                  input.hide();//隐藏文本框
                  input.prev().show().val('').focus();//显示前一个密码框
                }
            }
        });
        $(document).on('blur', '[placeholder]',function() {
    
    
            var input = $(this);
            var placeholderVal=input.attr('placeholder');
            if (input.val() == '' || input.val() ==  input.attr('placeholder')) {
    
    
                input.addClass('placeholder');
                if(input.attr('type')=='password'){
    
    //密码框进行处理,避免文字显示为点
                //我们项目中使用的layui,可根据自身项目情况,更换该显示的input框,但需保留标记class属性placeholderPassword
                  var formHtml="<input type=\"text\"  value=\""+placeholderVal+"\" placeholder=\""+placeholderVal+
                      "\" autocomplete=\"off\"  class=\"layui-input placeholderPassword\">";
                  
//                     input.replaceWith(formHtml);//ie8不支持此方法
                  input.hide().after(formHtml);//隐藏密码输入框并在密码框后面增加文本框避免文字被替换成点
                }
                input.val(placeholderVal);
            }
        });
        $('[placeholder]').blur();
    };
});

效果如下:

总结

该方案不一定完美，也还有缺陷。比如使用鼠标点击密码框两次才能输入。但使用tab键就可以直接输入。
以上以供参考。