Element: [Bug Report]IE9下表单验证的input的值执行删除操作后失焦恢复原值

[Cc9410]

Element UI version

1.3.7

OS/Browsers version

win7/IE9

Vue version

2.3.4

Reproduction Link

https://jsfiddle.net/46wv0pwm/

Steps to reproduce

1. 在input框内输入123456
2. 使用backspace删除，期待值为1234
3. 鼠标失焦，此时值重新变为123456

What is Expected?

值变为1234

What is actually happening?

恢复为之前的值123456（删除无效）

[element-bot]

Translation of this issue:

Element UI version

1.3.7

OS/Browsers version

Win7/IE9

Vue version

2.3.4

Reproduction Link

https://jsfiddle.net/46wv0pwm/

Steps to reproduce

1. enter 123456 in the input box

2. use backspace to delete, expect 1234

3. the mouse loses focus, and the value is changed to 123456 again

What is Expected?

The value changed to 1234

What is actually happening?

Revert to the previous value of 123456 (delete invalid)

[rhinonan]

这个在IE9下确实有问题，只要第一个字符是输入的数字就会有问题。
在源码 input.vue
@input="handleInput" 这行代码后面加入下面这行代码可规避此问题
@keyup.delete="handleInput"
原因就是这个@input 没有响应删除键

[Leopoldthecoder]

@rhinonan 手边没有 IE9，能否帮忙确认原生 input 是否存在这个问题：https://jsfiddle.net/7zpoy12n/ ，以及如果存在的话，加上 @keyup.delete="handleInput" 是否能够解决？

[rhinonan]

问题是这样的，我的情况是与#4036 https://github.com/ElemeFE/element/issues/4036 的一致。我在公司做的项目是拿你们的element做了一个定制，加上 @keyup.delete="handleInput"是解决了的。
IE9 是公司的内网环境，我定制版本也是内网环境，所以没有办法帮你们确认。
@keyup.delete="handleInput"只是规避的办法，我认为是vue.js 自己的BUG，@input 无法响应IE9下的删除键。或许这个BUG 不用改，等尤大大解决。

[rhinonan]

还有一点就是 jsfiddle好像是不支持IE9的

[Cc9410]

@rhinonan 可是我这里做的测试是只有在开启表单验证的模式下才会出现这个错误 如果单单是引用原生或者el-input是没有这个问题的 我觉得应该是表单验证（form）导致的

[rhinonan]

@Cc9410 我发现这个问题的时候是因为搜索不到内容开始输入admin1，后面把1删了。搜索却发现抓包的还是admin1。没有表单验证。。。 看样子这个问题有点复杂

[Cc9410]

@rhinonan 我刚刚重新测试了一下 发现是el-input的问题 如果只是引用el-input 在IE9下删除显示表现正常 但是实际绑定v-model值没有响应删除 就是你出现的情况 而在表单验证的情况下 删除后连数据显示都是不正常的
在IE9下测试原生input却都是正常的

[rhinonan]

@Cc9410 源码中el-input 响应数据使用的是vue的@input事件。你有时间的话可以在源码中加上@keyup.delete="handleInput"。应该是可以解决问题的。

[Cc9410]

@rhinonan 呃，我按你说的去做了 这个问题并没有被解决哦= = 看来只能等过一阵专心研究下了

[adivspan]

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 下应该也是正常的。

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.