ie9 支持占位符

封装placeholder.js,在需要的页面进行引入。

import $ from 'jquery'
function placeholder() {
  // 不支持placeholder
  if(!isSupportPlaceholder()) {
    // 遍历所有input对象, 除了密码框
    $('input').not("input[type='password']").each(
      function() {
        var self = $(this);
        var val = self.attr("placeholder");
        input(self, val);
      }
    );
    /** 对password框的特殊处理
     * 1.创建一个text框
     * 2.获取焦点和失去焦点的时候切换
     */
    $('input[type="password"]').each(
      function() {
        var pwdField    = $(this);
        var pwdVal      = pwdField.attr('placeholder');
        var pwdId       = pwdField.attr('id');
        // 重命名该input的id为原id后跟1
        pwdField.after('<input class="ivu-input" id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
        var pwdPlaceholder = $('#' + pwdId + '1');
        pwdPlaceholder.show();
        pwdField.hide();

        pwdPlaceholder.focus(function(){
          pwdPlaceholder.hide();
          pwdField.show();
          pwdField.focus();
        });

        pwdField.blur(function(){
          if(pwdField.val() == '') {
            pwdPlaceholder.show();
            pwdField.hide();
          }
        });
      }
    );
  }
}

// 是否支持placeholder属性
function isSupportPlaceholder() {
  var input = document.createElement('input');
  return 'placeholder' in input;
}

// jQuery处理placeholder
function input(obj, val) {
  var $input = obj;
  var val = val;
  $input.attr({value:val});
  $input.focus(function() {
    if ($input.val() == val) {
      $(this).attr({value:""});
    }
  }).blur(function() {
    if ($input.val() == "") {
      $(this).attr({value:val});
    }
  });
}
export default placeholder;

引入：

import placeholder from '../page/utils/placeholder'

1，第一种情况，如果是刚打开页面就有输入框，就在当前页面初始化的时候，像iview的弹出框就是事件触发的，本身用的是css进行显示和隐藏的。所以就是打开的页面的时候，节点就是存在的，直接就触发事件：

  mounted() {
    this.$nextTick(() => {
      placeholder()
    })
  },

2，第二种情况，就是使用 v-if 进行节点的删除和显示的时候，要在事件触发的时候，才调用当前的占位符事件。

 /**进行登录方式切换 */
    tabLoginFn: function() {
      let ths = this;

      if (ths.loginType) {
        ths.loginTypeTxt = "账号密码登录";
        ths.loginType = false;
        ths.$nextTick(() => {
          placeholder();
        });
      } else {
        ths.loginTypeTxt = "手机验证码登录";
        ths.loginType = true;
        ths.$nextTick(() => {
          placeholder();
        });
      }