微信小程序点击清除 input 内容，会穿透按钮点击到 input

Question

小程序开发
在模拟器上点击清除正常

在手机上测试时，如果input没有获焦点（即键盘没有弹出），也是可以点击清除的。但键盘弹出时点击清除会穿透按钮，点击input。如下图

部分代码截图：

wxss 清除按钮宽高足够，也设置了z-index。
感谢解答！

Answer 1

问题已解决，把搜索框分成了两部分，左边是 input，右边为清除按钮。这样就避免了点击穿透到 input 了。

Answer 2

放到同一个view里试试

Answer 3

你最后个思路跟我有点像， 但我不是分成两部分，我发现会穿透主要是因为我input没设置宽度，导致输入时输入框的范围过长抢走清除按钮的焦点，输入短的字节看不出来，我就按了一大串字发现input的范围远远超出了原本显现的范围，会经过清除按钮，因此我的解决方案是 通过前端限制input宽的width 使它最长只能在清除按键前，你可以先给清除按钮弄个背景色，看看按键范围，然后输一大串字超过一点点到背景色里，这种情况下调试板设置width就方便调了

Answer 4

用cover-image和cover-view，这2个标签就好了，这个是覆盖在原生组件之上的文本视图。