❝
这篇文章要感谢抖音：程序员小山与BUG！
你说是bug吧也算是bug，不是bug吧也不是bug，不影响使用，触发情况也不多，但万一测试提了这个bug还是要解决的[doge]，在此记录一下这个有意思的bug!
❞
Bug说明
谷歌浏览器是前置条件
还要加上input输入框
但输入框要有2个附加条件：
type是number以及css的text-align是center!
Bug测试
苹果浏览器未发现异常
谷歌和Edge均发现问题
猜测只要是谷歌内核满足以上情况均会出现问题
Bug复现
w3c原生输入框
在w3c上测试
正常情况
文字居中、光标在文字之后
输入纯文字之后，文字为空，光标变左，css失效！
再次输入数字，会居中！
element ui 官网原生输入框测试
el-input 与图片效果类似
正常样子
输入纯文字之后
element ui 分页组件测试
分页组件是数字输入框，切样式也是居中
正常情况
数字居中
输入纯文字后
输入纯文字，文字置空，光标左移
失去焦点
失去焦点，文字居中且被赋值
分页输入框源码
通过源码我们不难发现，当输入框触发change事件会去使用父级的值，所以这个地方基本上修复了这个Bug
ant 官网原生输入框测试
a-input 也会出现
原生input的问题与element ui原生input效果差不多，就不多说了
ant 官网分页组件测试
分页组件是没有问题的，他们使用的是type="text"，并且会输入完成会置空！
分页输入框
InputNumber组件
element ui
ant design
不难发现，他们都是模拟的数字输入框，本质是type="text"和数据校验才不会出现这个问题。
解决方法
从上面两个框架我们发现，他们在设计的时候，不知道是有意还是无意的都避免了这个问题
使用type="text"代替
我们在需要的时候可以二次封装输入框，使用type="text"并且去校验数据的格式是否是number。
这种解决方法就会出现上面InputNumber那种效果，在触发change事件的时候做判断，不会出现上述的bug。
但数字框里在事件未触发是会有中文，虽然不知道为什么他们都没有用input事件做处理！
不要居中对齐，直接"中路对线"
对，就是改需求，明确的阐述这样的原因，以及会导致的方法，理shi直feng气bei壮wei的改动需求，已达到最小改动，这是最优解！
那上述都不能实现，只能采取C计划
输入纯中文出现bug的一瞬间，替换值，来一个障眼法，当然还是会有瑕疵，最好就是谷歌官方解决
1、输入值的时候做判断，先替换0在替换空
// 循环所有的input[type=number]的输入框
document.querySelectorAll("input[type=number]").forEach(inputDom => {
// 如果居中
if (inputDom.style.textAlign === "center") {
// 替换点击事件
inputDom.oninput = (e) => {
if (e.data === "" || e.target.value === "") {
e.target.value = 0
setTimeout(() => {
e.target.value = null
})
}
}
}
})这种输入的快，会有0闪烁
2、输入值的时候做判断，直接替换null
// 循环所有的input[type=number]的输入框
document.querySelectorAll("input[type=number]").forEach(inputDom => {
// 如果居中
if (inputDom.style.textAlign === "center") {
// 替换点击事件
inputDom.oninput = (e) => {
if (e.data === "" || e.target.value === "") {
e.target.value = null
}
}
}
})这种在输入框有值的时候，全选输入框，按字母还是会出现bug，但文字输入正常，已经缩小了出现频率
上述2个解决方案，在某种情况下，在vue会暂时失去响应式，会在下次正常值的时候的change事件后恢复
总的来说还是第一种可行！
都不行，启动最终方案，"RUN"
当然这些小问题，run不划算，还是"中路对线"吧！
如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。
关注公众号了解更多
