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

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

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

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

真机:

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

小键盘:

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上流星&洒下星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值