微信小程序中 input 的自定义删除按钮点不了

微信小程序中 input 的自定义删除按钮点不了

问题描述

业务场景：手机号输入框有个删除按钮可以删除输入的手机号。但是真机上经常输入框聚焦之后删除按钮点击不了。

问题原因

在开发者工具上调试发现：input 框在安卓和ios上都有默认不同的宽度，并且 微信小程序 input 是原生的组件，当聚焦之后，层级最高，会覆盖掉删除按钮，失焦之后就可以点击。

比较直观的图如下：

解决方案

因为 input 层级最高，并且宽度不固定。层级最高肯定控制不了，可以设置固定的宽度，让其和删除按钮分开，就可以点击到删除按钮了；