微信小程序开发教程：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字段的内容。如果没有内容，则保持不变.