微信小程序输入框

小程序的输入框主要有单行输入框 input 和多行输入框 textarea,这两个控件虽然看着比较简单,但使用时很容易踩到坑,导致出现各种问题,比如输入时光标跳转等等,这篇文章主要介绍怎么避免这些问题。

input 和 textarea 比较常用的属性有 placeholder、placeholder-class、bindinput、bindblur 、value、name 等等。
placeholder 是指未输入时显示的提示文案,placeholder-class 则是 placeholder 的样式,可在 wxss 里面定义。
bindinput 是输入时的回调方法,bindblur 是输入完成后失去焦点时的回调方法,但是 textarea 的 bindblur 方法有坑,后面会讲。
value 是输入框里面的文案,主要是在输入框有初始值的时候使用,也往往是引起上述问题的原因。
name 属性主要用于表单提交时,后面会讲。

这里以输入单行标题和多行内容为例子进行说明。

1、在新建的情况下,输入框仅仅是用于输入,没有初始值,则不需要为其设置 value 属性,不会产生任何问题。
方案一:
在 js 的 data 里面定义一个字符串字段作为输入的内容,在输入时的回调方法 bindinput 中改变 data 里面对应的字段,然后在点击按钮提交的时候使用该字符串作为输入的内容。这里之所以不使用 bindblur 方法是因为 textarea 的坑,后面会讲。

wxml文件:
<view>
  <input type="text" placeholder="请输入标题" placeholder-class="placeholder" bindinput="inputTitle" />
  <textarea placeholder="请输入内容" placeholder-class="placeholder" bindinput="inputContent" />
  <button bindtap="save">保存</button>
</view>

js文件:
Page({
  data: {
    title: '',
    content: ''
  },
  inputTitle: function (e) {
    this.setData({
      title: e.detail.value
    })
  },
  inputContent: function (e) {
    this.setData({
      content: e.detail.value
    })
  },
  save: function (e) {
    var title = this.data.title;
    var content = this.data.content;
    // 提交请求
    ...
  }
})

方案二:
采用表单提交的方式,不需要在 data 中定义字段,也无需绑定 bindinput 或 bindblur 方法,只需要在输入框中定义 name 属性,然后在表单提交的方法里面使用 e.detail.value.xxx 获取输入框的内容,其中 xxx 就是 name 对应的字符串。

wxml文件:
<form report-submit="true" bindsubmit="save">
  <input type="text" placeholder="请输入标题" placeholder-class="placeholder" name="title" />
  <textarea placeholder="请输入内容" placeholder-class="placeholder" name="content" />
  <button class="button" form-type="submit">保存</button>
</form>

js文件:
Page({
  data: {
  },
  save: function (e) {
    var title = e.detail.value.title.trim();
    var content = e.detail.value.content.trim();
    // 提交请求
    ...
  }
})

2、在修改编辑的情况下, 输入框里面有初始文案,则需要将 value 设置为 data 里面对应的字段,此时如果继续用 bindinput 修改 data 里面对应的字段,则由于每次修改时数据会更新到输入框,导致光标会跳转到最后。

wxml文件:
<view>
  <input type="text" placeholder="请输入标题" placeholder-class="placeholder" bindinput="inputTitle" value="{{title}}" />
  <textarea placeholder="请输入内容" placeholder-class="placeholder" bindinput="inputContent" value="{{content}}" />
  <button bindtap="save">保存</button>
</view>

js文件:
Page({
  data: {
    title: '',
    content: ''
  },
  onLoad: function (opt) {
    // 设置初始值
    this.setData({
      title: opt.title,
      content: opt.content
    })
  },
  inputTitle: function (e) {
    this.setData({
      title: e.detail.value
    })
  },
  inputContent: function (e) {
    this.setData({
      content: e.detail.value
    })
  },
  save: function (e) {
    var title = this.data.title;
    var content = this.data.content;
    // 提交请求
    ...
  }
})

方案1:
将 bindinput 改为 bindblur,即在输入框失去焦点时才改变 data 里面对应的字段。然而当输入完直接点击按钮时,textarea 控件的 bindblur 并不会先执行,导致需要再次点击按钮才能获取 textarea 中的真实数据。或者先点击其他区域使 textarea 的 bindblur 执行完成后,再点击按钮提交。而 input 控件则不会有这个问题,因此这种方案只有在单行输入的情况下才能使用。

wxml文件:
<view>
  <input type="text" placeholder="请输入标题" placeholder-class="placeholder" bindblur="blurTitle" value="{{title}}" />
  <textarea placeholder="请输入内容" placeholder-class="placeholder" bindblur="blurContent" value="{{content}}" />
  <button bindtap="save">保存</button>
</view>

js文件:
Page({
  data: {
    title: '',
    content: ''
  },
  onLoad: function (opt) {
    // 设置初始值
    this.setData({
      title: opt.title,
      content: opt.content
    })
  },
  blurTitle: function (e) {
    this.setData({
      title: e.detail.value
    })
  },
  blurContent: function (e) {
    this.setData({
      content: e.detail.value
    })
  },
  save: function (e) {
    var title = this.data.title;
    var content = this.data.content;
    // 提交请求
    ...
  }
})

方案2:
在 data 中为每个输入框增加一个对应的初始值字段,将 value 设置成该字段,其他的不变。这种方案能很好的解决问题,代价也不大。

wxml文件:
<view>
  <input type="text" placeholder="请输入标题" placeholder-class="placeholder" bindinput="inputTitle" value="{{titleOrigin}}" />
  <textarea placeholder="请输入内容" placeholder-class="placeholder" bindinput="inputContent" value="{{contentOrigin}}" />
  <button bindtap="save">保存</button>
</view>

js文件:
Page({
  data: {
    titleOrigin: '',
    title: '',
    contentOrigin: '',
    content: ''
  },
  onLoad: function (opt) {
    // 设置初始值
    this.setData({
      titleOrigin: opt.title,
      contentOrigin: opt.content
    })
  },
  inputTitle: function (e) {
    this.setData({
      title: e.detail.value
    })
  },
  inputContent: function (e) {
    this.setData({
      content: e.detail.value
    })
  },
  save: function (e) {
    var title = this.data.title;
    var content = this.data.content;
    // 提交请求
    ...
  }
})

方案3:
采用表单提交的方法,跟之前一样,不需要绑定 bindinput 或者 bindblur 等回调方法,只需要在输入框里面加上 name 属性。

wxml文件:
<form report-submit="true" bindsubmit="save">
  <input type="text" placeholder="请输入标题" placeholder-class="placeholder" name="title" value="{{title}}" />
  <textarea placeholder="请输入内容" placeholder-class="placeholder" name="content" value="{{content}}" />
  <button class="button" form-type="submit">保存</button>
</form>

js文件:
Page({
  data: {
    title: '',
    content: ''
  },
  onLoad: function (opt) {
    // 设置初始值
    this.setData({
      title: opt.title,
      content: opt.content
    })
  },
  save: function (e) {
    var title = e.detail.value.title.trim();
    var content = e.detail.value.content.trim();
    // 提交请求
    ...
  }
})

一般来说,如果表单提交的方法不被占用的话,推荐使用表单提交的方法,否则,如果表单提交的方法需要用在别的地方(比如之前的文章《微信小程序消息重复推送》里面提到的postFormId)的话,则可以使用增加初始值字段的方法。

最后,一般输入框后面会加一个清空的图标,在有内容时显示,以下是基本的实现。

wxml文件:
<form report-submit="true" bindsubmit="save">
  <view class="info">
    <view class="info-item first title">
      <view class="label">标题</view>
      <input type="text" placeholder="请输入标题" placeholder-class="placeholder" bindinput="inputTitle" name="title" value="{{title}}" />
      <icon class="clear" type="clear" size="15" wx:if="{{!titleEmpty}}" catchtap="clearTitle" />
    </view>
    <view class="info-item content">
      <view class="label">内容</view>
      <textarea placeholder="请输入内容" placeholder-class="placeholder" bindinput="inputContent" name="content" value="{{content}}" maxlength="-1" auto-height="true" />
      <icon class="clear" type="clear" size="15" wx:if="{{!contentEmpty}}" catchtap="clearContent" />
    </view>
  </view>
  <button class="button" form-type="submit">保存</button>
</form>
js文件:
Page({
  data: {
    title: '',
    content: '',
    titleEmpty: true,
    contentEmpty: true
  },
  onLoad: function (opt) {
    // 设置初始值
    this.setData({
      title: opt.title,
      content: opt.content
    })
    this.setData({
      titleEmpty: util.isTextEmpty(this.data.title),
      contentEmpty: util.isTextEmpty(this.data.content)
    })
  },
  inputTitle: function (e) {
    this.setData({
      titleEmpty: e.detail.value.length == 0
    })
  },
  clearTitle: function () {
    this.setData({
      title: '',
      titleEmpty: true
    })
  },
  inputContent: function (e) {
    this.setData({
      contentEmpty: e.detail.value.length == 0
    })
  },
  clearContent: function () {
    this.setData({
      content: '',
      contentEmpty: true
    })
  },
  save: function (e) {
    var title = e.detail.value.title.trim();
    var content = e.detail.value.content.trim();
    this.setData({
      title: title,
      content: content
    })
    // 提交请求
    ...
  }
})
wxss文件:
.info {
  background-color: #fff;
}

.info-item {
  height: 88rpx;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-top: 1rpx solid #e5e5e5;
  color: #000;
  font-size: 32rpx;
}

.info-item.first {
  border: 0;
}

.content {
  height: auto;
  align-items: flex-start;
}

.label {
  flex-shrink: 0;
}

.title .label {
  width: 182rpx;
}

.content .label {
  width: 170rpx;
  padding-top: 20rpx;
}

input {
  flex-grow: 1;
}

textarea {
  flex-grow: 1;
  min-height: 150rpx;
  margin: 10rpx 70rpx 0 0;
}

.placeholder {
  color: #9a9a9a;
}

.clear {
  flex-shrink: 0;
  padding: 20rpx;
}

.button {
  margin-top: 20rpx;
}

推荐阅读更多精彩内容