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

今天开发的时候在真机上突然发现一个小问题，真机搜索完毕后点击删除按钮没办法一键清空搜索框内的内容，本来以为好解决，结果试了好几种方式都没有完美解决掉，最后经过多次尝试发现关闭弹出的小键盘就可以点到删除按钮，既然我控制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()
}