常见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等等

巴特西

常见ie9兼容问题

最新文章

热门文章