Element: [Bug Report] el-input不兼容IE9,输入框内容没有跟着输入内容变化

Created on 6 Apr 2017  ·  4Comments  ·  Source: ElemeFE/element

Element UI version

1.2.7

OS/Browsers version

win7

Vue version

2.2.6

Reproduction Link

https://codepen.io/plusice/details/QpREGL/
(ie9不能打开链接,可以看这个http://sandbox.runjs.cn/show/eybzkfck

Steps to reproduce

删除el-input输入框的字符,数据没有同步。用原生input是可以的。

What is Expected?

用ie9打开,数据跟着输入框的编辑变化

What is actually happening?

用ie9打开,数据没有跟着输入框的删除操作变化

input windows

Most helpful comment

Element UI version:v1.3.7
OS/Browsers version:win10/IE9
Vue version:v2.3.4

项目里面使用 el-input 组件的页面在 IE9 下也碰到类似的问题,
经过一番调研和调试,目前是正常了,以下是调研到的问题原因和用到的解决方法,
由于本人水平有限,以下所述如有错漏之处,望不吝赐教。

问题原因:

https://github.com/ElemeFE/element/blob/v1.3.7/packages/input/src/input.vue#L35-L35
看了一下 el-input 组件源码,绑定的是 input 事件。

http://caniuse.com/#search=input
调研了一下,发现 input 事件在 IE9 下存在兼容性问题,
比如 caniue 上的 Notes 里的第一点所说:
Doesn't fire an input event when deleting text (via Backspace, Delete, Cut, etc.).

解决方法:

https://github.com/buzinas/ie9-oninput-polyfill/blob/master/ie9-oninput-polyfill.js#L1-L13
后面在 ie9-oninput-polyfill 代码的基础上,另外添加了 number 和 password 这两种类型的表单到 if 判断里,以满足项目需求,目前看 el-input 组件在 IE9 下是正常了。

https://github.com/vuejs/vue/blob/v2.3.4/src/platforms/web/runtime/directives/model.js#L10-L18
之后在 vue 源码的 v-model 指令实现里,也发现类似的针对 IE9 input event 的 polyfill,
所以用 vue 的 v-model 指令在 IE9 下应该也是正常的。

All 4 comments

IE9下这个BUG我也遇到了,现在IE9下面的BUG都不处理了吗?11天了都

我也遇到这个问题了 我的是输入会有变化 但是删除无变化

这么久了还没解决,有什么解决方法吗?

Element UI version:v1.3.7
OS/Browsers version:win10/IE9
Vue version:v2.3.4

项目里面使用 el-input 组件的页面在 IE9 下也碰到类似的问题,
经过一番调研和调试,目前是正常了,以下是调研到的问题原因和用到的解决方法,
由于本人水平有限,以下所述如有错漏之处,望不吝赐教。

问题原因:

https://github.com/ElemeFE/element/blob/v1.3.7/packages/input/src/input.vue#L35-L35
看了一下 el-input 组件源码,绑定的是 input 事件。

http://caniuse.com/#search=input
调研了一下,发现 input 事件在 IE9 下存在兼容性问题,
比如 caniue 上的 Notes 里的第一点所说:
Doesn't fire an input event when deleting text (via Backspace, Delete, Cut, etc.).

解决方法:

https://github.com/buzinas/ie9-oninput-polyfill/blob/master/ie9-oninput-polyfill.js#L1-L13
后面在 ie9-oninput-polyfill 代码的基础上,另外添加了 number 和 password 这两种类型的表单到 if 判断里,以满足项目需求,目前看 el-input 组件在 IE9 下是正常了。

https://github.com/vuejs/vue/blob/v2.3.4/src/platforms/web/runtime/directives/model.js#L10-L18
之后在 vue 源码的 v-model 指令实现里,也发现类似的针对 IE9 input event 的 polyfill,
所以用 vue 的 v-model 指令在 IE9 下应该也是正常的。

Was this page helpful?
0 / 5 - 0 ratings