常见ie9兼容问题

公司项目要求需要兼容ie9，开发过程中遇到了许多问题，在这里记录一下，希望可以帮到其他需要的小伙伴。

浏览器兼容性问题无外乎三点，css样式兼容、JavaScript兼容及h5部分标签的兼容。主要介绍以下几种常见兼容问题：

1、  flex布局兼容问题

相信很多小伙伴在开发的时候，都喜欢用flex进行布局，这种布局方式简单方便快捷，但是在ie9中，这个属性不兼容。这个时候，推荐使用float属性进行布局，或者绝对定位的方式进行布局。

2、  transform属性

部门老版本ie9浏览器不支持该属性，介意使用相对定位的方式进行位置微调。

3、文件上传　　

　　绝大部分情况，我们上传文件都是直接使用FormData对象异步上传，但是ie9版本不支持formdata对象得异步上传。那么怎么办呢？可以使用最初的表单提交的方式，文件本身上传不难，只需要注意一些细节：

①用最初的表单提交的方式form.submit()

②<input type='file'> onchange问题

③点击<input type='file'>问题

④提交表单后跳转问题

4、placeholder问题

在表单输入的时候，未输入信息的时候，往往会看到一些提示性文字，这就是input标签的placeholder属性所带来的效果。但是在ie9及以下浏览器中，不支持这个属性。如果要实现这种效果，就得另辟蹊径了。目前主要有以下几种方式：

1）使用value来代替

2）添加标签，解决思路主要如下：

①判断浏览器是否支持placeholder属性

'placeholder' in document.createElement('input')

②获取当前页面中的所有具有placeholder属性的元素

document.querySelectorAll('[placeholder]')

③由于document.querySelectorAll返回的是一个 NodeList 对象,需要将其通过Array.prototype.slice.call()将其转换成数组，这样我们就可以通过数组的forEach()方法对页面中获取到的所有元素进行遍历

Array.prototype.slice.call(document.querySelectorAll('[placeholder]'))

④遍历取到的dom数组，根据当前的元素克隆出一个一样的克隆节点(备注：这里的思想是这样的，克隆出一个一样的节点插入到当前节点的后面，当浏览器不支持placeholder属性的时候，需要显示placeholder属性的信息，就将克隆节点显示出来，将当前节点隐藏掉)

var cloneNode = item.cloneNode()

⑤判断节点的类型，如果节点的类型[type="password"],就将克隆节点的类型改为text

if (cloneNode.getAttribute('type').toLowerCase() === 'password') {
  cloneNode.setAttribute('type', 'text')
}

⑥将克隆节点的placeholder属性值，写入value；并将此克隆节点隐藏，将克隆节点插入到当前节点的后面

⑦对克隆节点绑定focus事件，当克隆节点获取焦点时，将克隆节点隐藏，并将当前节点显示出来，并将当前节点获取焦点

item.nextSibling.addEventListener('focus', function () {
  this.style.display = 'none'
  this.previousSibling.style.display = 'inline'
  this.previousSibling.focus()
})

⑧对当前节点绑定focus事件，当前节点获取焦点时，将紧跟在当前节点后面的克隆节点隐藏掉

item.addEventListener('focus', function () {
  this.nextSibling.style.display = 'none'
})

⑨对当前节点绑定blur事件，当前节点失去焦点时，如果当前节点没有进行任何输入，则需要对齐进行placeholder提示，这时就将当前节点隐藏，将紧跟在当前节点后面的克隆节点显示出来

item.addEventListener('blur', function () {
  if (!this.value) {
      this.style.display = 'none'
      this.nextSibling.style.display = 'inline'
  }
})

⑩在页面初始化完成后，判断当前节点是否有初始输入值，如果没有的话，将当前节点隐藏，将紧跟在当前节点后的克隆节点显示出来

if (!item.value) {
  item.style.display = 'none'
  item.nextSibling.style.display = 'inline'
}

整体代码如下：

function compatiblePlaceholder() {
  if (!('placeholder' in document.createElement('input'))) {
    // 将返回的nodeList对象转为数组
    var nodes = Array.prototype.slice.call(document.querySelectorAll('[placeholder]'))
    nodes.forEach(function (item, index) {
      if (item.nextElementSibling) {

      } else {
        item.addEventListener('focus', function () {
          this.nextSibling.style.display = 'none'
        })
        item.addEventListener('blur', function () {
          if (!this.value) {
            this.style.display = 'none'
            this.nextSibling.style.display = 'inline'
          }
        })
        var cloneNode = item.cloneNode()
        // 如果[type='password']类型，则转为text
        if (cloneNode.getAttribute('type').toLowerCase() === 'password') {
          cloneNode.setAttribute('type', 'text')
        }
        cloneNode.setAttribute('value', cloneNode.getAttribute('placeholder'))
        cloneNode.style.display = 'none'
        item.insertAdjacentHTML('afterend', cloneNode.outerHTML)
        item.nextSibling.addEventListener('focus', function () {
          this.style.display = 'none'
          this.previousSibling.style.display = 'inline'
          this.previousSibling.focus()
        })
        if (!item.value) {
          item.style.display = 'none'
          item.nextSibling.style.display = 'inline'
        }
      }

    })
  }
}

3）直接引用现成的第三方插件，如jquery.placeholder.min.js等等