微信小程序输入框

作者: june5253 | 来源:发表于2017-07-17 12:37 被阅读592次

小程序的输入框主要有单行输入框 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;
}

微信小程序输入框

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小程序