最近在做微信改版,把微信上的 UI向 APP靠拢,重构登录页面的时候出现了奇怪的 Bug。
输入手机号,再一直删除,删到最后光标没有回到最前面。偶现,iOS 专属。
Step1
input 里面 placeholder 都出来了,查看 input 的 value也是空值,但是光标前面还是有空隙。
由于这个input 加了 autocomplete=off, 猜测是微信为了解决自动填充而做了处理(默认插入空格之类的),于是去掉 autocomplete。
事实证明我想多了(扶额),测试反馈问题还是存在,safari 也有这个问题,bug reopen。
Step2
自己找了很久没发现原因后让 Givon 帮忙看了下,最终发现是由于input 后面清空输入框按钮导致。
产品的逻辑是这样的:
输入框内有值的时候展示清空按钮,为空的时候隐藏。
监听 input,为空的时候将删除按钮 hide,由于dom位置变化,导致光标渲染异常。
解决办法
1 | window.setTimeout(function() { |