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