微信小程序开发教程:input输入框点击后自动清空,方便用户重新输入,提升用户体验

我们来按照下面的一个案例进行修改:

<input type="digit" class="search" placeholder="请输入你的分数" bindinput="onInput" bindfocus="onFocus" wx:if="{
   
   {!showAdPopup}}" cursor-spacing="10" value="{
   
   {inputValue}}"/>

要实现这样的功能,可以通过处理focus事件来清空input字段的内容。每次用户点击input时,都会触发focus事件。在这个事件的处理函数中,你可以检查input的当前值,并根据是否有内容来决定是否清空它。

首先,你需要添加一个bindfocus属性到input标签中,以便绑定一个事件处理函数。同时增加一个value="{ {inputValue}}":

<input type="digit" class="search" placeholder="请输入你的分数" bindinput="onInput" bindfocus="onFocus" wx\\:if="{
   
   {!showAdPopup}}" auto-focus="{
   
   {autoFocus}}" cursor-spacing="10" value="{
   
   {inputValue}}"/>

接下来,在你的页面的JavaScript代码中,添加onFocus函数:

Page({
  // ... 页面的其他数据和函数

  // 输入框聚焦时调用的函数
  onFocus: function(event) {
    // 如果输入框有内容,则清空它
    if (event.detail.value) {
      // 清空输入框的内容
      this.setData({
        inputValue: '' // 假设你的输入框绑定的是inputValue变量
      });
    }
    // 如果输入框没有内容,则不做任何操作
  },

  // 输入框输入时调用的函数
  onInput: function(event) {
    // 更新输入框的内容
    this.setData({
      inputValue: event.detail.value
    });
  },

  // ... 页面的其他数据和函数
});

请确保input字段的值是通过页面的数据绑定来管理的。在上面的代码中,我假设你的input字段的值绑定到了名为inputValue的变量上。每次聚焦时,onFocus函数会检查inputValue是否有内容,如果有,就将其清空。

最后,确保在你的页面的data对象中有一个inputValue属性,用来存储input字段的值:

Page({
  data: {
    inputValue: '', // 存储输入框的内容
    // ... 页面的其他数据
  },

  // ... 页面的其他函数
});

现在,每当用户点击input字段时,如果里面有内容,onFocus函数就会被触发,从而清空input字段的内容。如果没有内容,则保持不变.

猜你喜欢

转载自blog.csdn.net/qq_25501981/article/details/134737239