微信小程序真机一键清空搜索框按钮失效的问题

今天开发的时候在真机上突然发现一个小问题，真机搜索完毕后点击删除按钮没办法一键清空搜索框内的内容，本来以为好解决，结果试了好几种方式都没有完美解决掉，最后经过多次尝试发现关闭弹出的小键盘就可以点到删除按钮，既然我控制input及删除按钮没用那我直接在用户搜索完毕点击确认的时候将真机上弹出的小键盘关掉就可以了

由于文章内容太短不让发，我这里将之前尝试过的方法也一并奉上

失败案例一：

在微信小程序中，如果使用 `<input>` 组件，并且设置了 `type="text"` 和 `confirm-type="search"` 属性，那么在点击清空图标时，输入框的内容不会被清空。这是因为在这种情况下，清空图标实际上是一个搜索图标，而不是清空图标。

为了解决这个问题，可以使用 `<textarea>` 组件代替 `<input>` 组件，并设置 `auto-height` 属性和 `show-confirm-bar` 属性来模拟 `<input>` 组件的行为。具体实现方式如下：


<view class="search-box">
  <textarea class="search-input"
            placeholder="请输入搜索关键词"
            auto-height
            show-confirm-bar="{{false}}"
            value="{{searchValue}}"
            bindinput="onInput"
            bindfocus="onFocus"
            bindblur="onBlur"></textarea>
  <icon class="clear-icon" type="clear" size="20" catchtap="onClear"></icon>
</view>


data: {
  searchValue: ''
},
methods: {
  onInput(event) {
    this.searchValue = event.detail.value
  },
  onFocus() {
    // do something when input is focused
  },
  onBlur() {
    // do something when input is blurred
  },
  onClear() {
    this

失败案例二：

修改input框的宽度，让删除按钮不在input框上边（因为在小程序中input框是层级最高的），让他俩左右排列，虽说这样也可以实现，但是看着不好看，不太完美

成功案例：

当用户搜索完毕后关闭手机上的小键盘wx.hideKeyboard()

<input type="search"
placeholder="试试搜索肯德基" 
v-model="searchValue"
confirm-type="search"
@confirm="search()">
search(){
	//数据请求赋值完毕后关闭小键盘
	//搜索完毕后关闭真机小键盘，防止点击一键清空搜索框不生效
	wx.hideKeyboard()
}

这只是一种思路，当然你如果有更好的方式可以使用那个方式

下面是对真机与小键盘之间的区别介绍

真机：

真机一般指实际的物理设备，例如真实的计算机、手机等设备，在这些设备上进行软件测试时能够更直接地对硬件和系统进行验证和测试，更贴近真实用户使用场景。

小键盘：

小键盘一般指虚拟的软件测试环境，在计算机上模拟手机、平板等设备，进行软件测试。因为是在计算机上模拟，所以相对于真机测试来说，可以更加灵活、便捷，同时成本也会更低一些。

总的来说，真机测试更接近真实的场景，能够更准确地模拟用户使用情况，但测试成本较高；小键盘测试则更加灵活，成本更低，但可能不能完全模拟真实环境。因此，在软件测试过程中，通常需综合考虑各种因素，确定采用何种测试方法。