跳页组件的光标串了，没想到是chrome对原生文本框就有bug
demo预览：
https://sunzsh.github.io/vue-demos/#/page-char https://sunzsh.github.io/html-demos/number-input.html
代码：
【HTML】https://github.com/sunzsh/st-html-demo/blob/master/number-input.html
【Vue】 https://github.com/sunzsh/vue-el-demo/blob/master/src/views/page-char.vue
【vue补丁文件】https://github.com/sunzsh/vue-el-demo/blob/master/src/components/el-pagination-patched.js
注意看这文本框啊
在这里输入数字没有问题
然后呢输入一部分数字输入中文呢
也没问题
但是如果我们把内容都删掉
只输入中文
大家看
它光标就跑到左上角了
我也忘了这是哪个小伙伴
私信给我发的bug了哈
而且呢
饿了么官方的这个demo也有这个问题
大家看
他也会跑到最左边
我们先来排除一下这个bug
是否跟框架有关系啊
首先我们看到
它用的是一个Tab等于number的input
所以呢我准备了一个纯html的代码
也是type的number
然后也把它的文字做了居中处理
然后呢
我们来试一下有没有类似的问题啊
正常我们来输数字没有问题
但是呢我们还是输中文
大家看光标也跑到了最左边
说明这个bug跟框架没关系
也就是说针对这种type的number的input框
它在Chrome里边就会呈现这种bug
那怎么解决这个问题呢
我在网上搜了半天啊没找到解决方案
但是呢我试出来一个方法
其实也很简单
首先呢我们先给加一个
oninput事件，比如说我们叫：fixInvalidChar
然后把event传进去
我们写这个方法
然后把它接收一下
好我们在这里边先打印一下这个e
好注意
大家看每输入一个字数
它打印出来是这样的
就是这个e. data属性就是这个文字
然后呢大家注意有这个时候调空格
他就变成一个空字符串了
e.data是空
所以呢我们就判断一下
if e.data 等于 空字符串干什么呢
我们先让e.target.value = '0' 吧
先任意给一个数字啊
我们来看一下效果
哎过来了对吧
这个时候光标是对的
但是呢我们不能让它永远等于0对吧
所以重点来了
我们在这呢，用setTimeOut
把它的target.value设置成空字符串
再来试一下
123没问题
大家看 这回这个光标就是对的了
但是呢还有bug就是啊
我们先输入点字符再输入一个中文
他也变成空了
但正常情况下
如果我们没有做这个判断的话
大家看啊
他是没有这个问题的
它是变成123而不是变成空
所以呢相当于我们这个
还需要优化一下
怎么写呢
我们在这加一个判断
e.target.value
等等于空
就是其实如果我们输入123了
再输入中文的时候
这个e.target.value其实不是空
这样的话呢它就不用走下边了
我们再来试一下
"你好" ~ 大家看！没问题
直接输入
也没问题
好回过头来
我们再来看view里怎么解决哈
首先呢
我们给这个分页组件设一个r e f
方便在这里面能取到它
找到这个组件
然后el.querySelector这里边呢
我们就不找这个了，找…
input[type=number]
找到这个组件啊给它加一个on input
事件
好
我们在这里把刚才那个代码
复制过来就行了
从这个if拿过来
我们再来试一下
注意看
没问题
也没问题了
好那除了这个方法
如果项目里用这个组件又比较多
你又不想一个一个改
的话呢
也可以用我之前分享的那种继
承的方法
我这里边写好了哈
这打好的补丁
然后呢在main里边
把这个组件覆盖一下（use一下）
然后呢
我们在页面里就什么也不用做了
就正常的
来使用这个组件就可以了
我们来试一下
“你好” 大家看 正常了
也可以
最后更新于