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