input清除按钮点击无效

发现问题

环境:android、wechat

在android的微信浏览器中,存在一个bug:input的光标和清除按钮重叠,导致点击清除按钮无效。

具体表现为:

示意图.png

input 长度是不定的,当输入框获取焦点时,清除图标显示,此时输入框长度变短。

复现步骤:

  1. 输入很长的一段文字,超过输入框的显示区域
  2. 点击输入框外的任意区域,使输入框失去焦点。
  3. 点击输入框显示区域的最右侧边界,然后点击清除按钮,会发现不起作用。

错误代码可参看 错误案例

请注意需要在android的微信中打开,才会复现。


error.gif
额外说明

vux、Ant design mobile 的input组件都是上述方式,也存在此问题。

思考原因

pc、ios、以及android的普通浏览器环境均正常,很明显是微信android端的兼容性问题了。

分析是因为,点击输入框显示区域的最右侧,输入框长度变短后,光标的位置和清除按钮的位置重叠了,这导致点击清除按钮被穿透,实际点击的可能还是光标,或者input的未显示区域。

解决方案

给清除按钮预留出空间,避免输入框和清除按钮重叠。

参考elementUI的实现方式的源码可查看正常案例

correct.gif

截图软件

LICEcap

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,928评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,079评论 2 59
  • 原文链接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影阅读 33,010评论 6 472
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,931评论 22 665
  • 【环保】气候更热更湿 精选导读 全球变暖指的是在一段时间内,地球的大气和海洋因温室效应而造成温度上升的气候变化现象...
    wawdgbb阅读 189评论 0 0