小程序之坑01——按钮覆盖在Input框上的问题

Posted 2023-04-12

参考技术A 先上一张图

如图1-1所示，想做一个上面图片上的搜索框，很容易想到上面搜索框的布局方式就是，input框占满整个行间，然后清空按钮通过absolute定位到input框上面，然而这样的布局方式在小程序真机测试中是有问题的，问题描述如下：

问题所在： 当input框处于聚焦状态时，及键盘属于拉起状态。点击清空按钮是无法清空input框里的数据的，简单的说就是此时加在清空按钮上的点击，触摸等事件并不会触发。只有当input框失去焦点时及键盘属于隐藏状态时，清空按钮上的事件才能被触发。

原因所在：小程序中当input框属于聚焦状态时，会有个层级的提升，它的层级是最高的，会比覆盖在他上面的标签层级高，因此此时点击清空按钮时实际上点击的还是input框。只有当input框失去焦点时才会恢复到正常的层级，此时上面的覆盖标签会比input框层级高

当初以为是组件问题，结果采用小程序上的 cover-image ， cover-image 组件也无法解决问题。

解决办法：

因此我们得使用图1-2的布局方式，采用正常的左右布局的方式。input框和按钮各占整行的一部分，然后通过css去使input框看上去是占用一整行，清空按钮覆盖在上面，对于前端人员来说还是很好写的哈。

小程序里input宽度与文字显示的问题

不知道是不是bug，微信小程序里input宽度缩小，input可输入文字的区域会缩小的更多，比如说你把input宽度设置为90%，则input文字输入可显示的区域可能只有80%左右。
//(存在疑点=>)目前的解决方法：在input输入框外面套一层view，通过改变view的宽度控制input的长度，这样不会影响文字显示

注意 input框上 不能加display:flex 属性