发现问题
环境:android、wechat
在android的微信浏览器中,存在一个bug:input的光标和清除按钮重叠,导致点击清除按钮无效。
具体表现为:
input 长度是不定的,当输入框获取焦点时,清除图标显示,此时输入框长度变短。
复现步骤:
- 输入很长的一段文字,超过输入框的显示区域
- 点击输入框外的任意区域,使输入框失去焦点。
- 点击输入框显示区域的最右侧边界,然后点击清除按钮,会发现不起作用。
错误代码可参看 错误案例
请注意需要在android的微信中打开,才会复现。
额外说明
vux、Ant design mobile 的input组件都是上述方式,也存在此问题。
思考原因
pc、ios、以及android的普通浏览器环境均正常,很明显是微信android端的兼容性问题了。
分析是因为,点击输入框显示区域的最右侧,输入框长度变短后,光标的位置和清除按钮的位置重叠了,这导致点击清除按钮被穿透,实际点击的可能还是光标,或者input的未显示区域。
解决方案
给清除按钮预留出空间,避免输入框和清除按钮重叠。
参考elementUI的实现方式的源码可查看正常案例
截图软件
LICEcap