IE11 input事件的“歧视性”——巧妙化解前端小纠结

2023-12-15 17:52:14

前言

在前端开发中，我们经常会遇到各种兼容性问题。其中，IE11的兼容性问题尤为突出。本文将介绍IE11 input事件的“歧视性”，以及如何巧妙化解这一小纠结。

IE11 input事件的“歧视性”

在IE11中，input事件存在一个“歧视性”的问题。具体表现为，当我们在input元素上绑定input事件时，如果在事件处理函数中对Date对象进行解析，那么在IE11中解析的结果会与firefox、chrome等浏览器不同。

为了更好地理解这个问题，我们来看一个简单的例子：

<input type="text" id="date-input">

<script>
  const dateInput = document.getElementById('date-input');

  dateInput.addEventListener('input', (event) => {
    const date = new Date(event.target.value);
    console.log(date);
  });
</script>

这段代码的作用是，当我们在input元素中输入日期时，会触发input事件，并通过事件处理函数将输入的日期解析为Date对象，然后将Date对象输出到控制台。

在firefox、chrome等浏览器中，这段代码会正常工作。但是，在IE11中，这段代码会输出一个不正确的结果。这是因为，IE11中的Date.parse方法与firefox、chrome等浏览器中的Date.parse方法存在差异。

如何巧妙化解IE11 input事件的“歧视性”

既然我们已经知道了IE11 input事件的“歧视性”，那么我们就可以针对性地采取措施来化解这一问题。

一种方法是，我们在事件处理函数中使用Date.parse方法解析日期时，先将输入的日期字符串转换为数字，然后再将数字传递给Date.parse方法。这样，就可以避免IE11中的Date.parse方法的“歧视性”。

  const dateInput = document.getElementById('date-input');

  dateInput.addEventListener('input', (event) => {
    const dateString = event.target.value;
    const dateNumber = Date.parse(dateString);
    const date = new Date(dateNumber);
    console.log(date);
  });

另一种方法是，我们在事件处理函数中使用moment.js库来解析日期。moment.js是一个非常强大的日期处理库，它可以兼容IE11。

  const dateInput = document.getElementById('date-input');

  dateInput.addEventListener('input', (event) => {
    const dateString = event.target.value;
    const date = moment(dateString).toDate();
    console.log(date);
  });