有意思的bug：Input在谷歌浏览器下会出现异常显示问题！

❝

这篇文章要感谢抖音：程序员小山与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连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多