小程序的輸入框主要有單行輸入框 input 和多行輸入框 textarea毁腿，這兩個(gè)控件雖然看著比較簡(jiǎn)單，但使用時(shí)很容易踩到坑袱瓮，導(dǎo)致出現(xiàn)各種問(wèn)題宛瞄，比如輸入時(shí)光標(biāo)跳轉(zhuǎn)等等浮禾，這篇文章主要介紹怎么避免這些問(wèn)題。
input 和 textarea 比較常用的屬性有 placeholder份汗、placeholder-class盈电、bindinput、bindblur 杯活、value匆帚、name 等等。
placeholder 是指未輸入時(shí)顯示的提示文案旁钧，placeholder-class 則是 placeholder 的樣式吸重，可在 wxss 里面定義。
bindinput 是輸入時(shí)的回調(diào)方法均践，bindblur 是輸入完成后失去焦點(diǎn)時(shí)的回調(diào)方法晤锹，但是 textarea 的 bindblur 方法有坑摩幔，后面會(huì)講彤委。
value 是輸入框里面的文案，主要是在輸入框有初始值的時(shí)候使用或衡，也往往是引起上述問(wèn)題的原因焦影。
name 屬性主要用于表單提交時(shí)，后面會(huì)講封断。
這里以輸入單行標(biāo)題和多行內(nèi)容為例子進(jìn)行說(shuō)明斯辰。
1、在新建的情況下坡疼，輸入框僅僅是用于輸入彬呻，沒(méi)有初始值，則不需要為其設(shè)置 value 屬性，不會(huì)產(chǎn)生任何問(wèn)題闸氮。
方案一：
在 js 的 data 里面定義一個(gè)字符串字段作為輸入的內(nèi)容剪况，在輸入時(shí)的回調(diào)方法 bindinput 中改變 data 里面對(duì)應(yīng)的字段，然后在點(diǎn)擊按鈕提交的時(shí)候使用該字符串作為輸入的內(nèi)容蒲跨。這里之所以不使用 bindblur 方法是因?yàn)?textarea 的坑译断，后面會(huì)講。
wxml文件：
<view>
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" placeholder-class="placeholder" bindinput="inputTitle" />
<textarea placeholder="請(qǐng)輸入內(nèi)容" 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;
// 提交請(qǐng)求
...
}
})
方案二：
采用表單提交的方式或悲，不需要在 data 中定義字段孙咪，也無(wú)需綁定 bindinput 或 bindblur 方法，只需要在輸入框中定義 name 屬性巡语，然后在表單提交的方法里面使用 e.detail.value.xxx 獲取輸入框的內(nèi)容翎蹈，其中 xxx 就是 name 對(duì)應(yīng)的字符串。
wxml文件：
<form report-submit="true" bindsubmit="save">
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" placeholder-class="placeholder" name="title" />
<textarea placeholder="請(qǐng)輸入內(nèi)容" 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();
// 提交請(qǐng)求
...
}
})
2男公、在修改編輯的情況下杨蛋， 輸入框里面有初始文案，則需要將 value 設(shè)置為 data 里面對(duì)應(yīng)的字段理澎，此時(shí)如果繼續(xù)用 bindinput 修改 data 里面對(duì)應(yīng)的字段逞力，則由于每次修改時(shí)數(shù)據(jù)會(huì)更新到輸入框，導(dǎo)致光標(biāo)會(huì)跳轉(zhuǎn)到最后糠爬。
wxml文件：
<view>
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" placeholder-class="placeholder" bindinput="inputTitle" value="{{title}}" />
<textarea placeholder="請(qǐng)輸入內(nèi)容" placeholder-class="placeholder" bindinput="inputContent" value="{{content}}" />
<button bindtap="save">保存</button>
</view>
js文件：
Page({
data: {
title: '',
content: ''
},
onLoad: function (opt) {
// 設(shè)置初始值
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;
// 提交請(qǐng)求
...
}
})
方案1：
將 bindinput 改為 bindblur寇荧，即在輸入框失去焦點(diǎn)時(shí)才改變 data 里面對(duì)應(yīng)的字段。然而當(dāng)輸入完直接點(diǎn)擊按鈕時(shí)执隧，textarea 控件的 bindblur 并不會(huì)先執(zhí)行揩抡，導(dǎo)致需要再次點(diǎn)擊按鈕才能獲取 textarea 中的真實(shí)數(shù)據(jù)《屏穑或者先點(diǎn)擊其他區(qū)域使 textarea 的 bindblur 執(zhí)行完成后峦嗤，再點(diǎn)擊按鈕提交。而 input 控件則不會(huì)有這個(gè)問(wèn)題屋摔，因此這種方案只有在單行輸入的情況下才能使用烁设。
wxml文件：
<view>
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" placeholder-class="placeholder" bindblur="blurTitle" value="{{title}}" />
<textarea placeholder="請(qǐng)輸入內(nèi)容" placeholder-class="placeholder" bindblur="blurContent" value="{{content}}" />
<button bindtap="save">保存</button>
</view>
js文件：
Page({
data: {
title: '',
content: ''
},
onLoad: function (opt) {
// 設(shè)置初始值
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;
// 提交請(qǐng)求
...
}
})
方案2：
在 data 中為每個(gè)輸入框增加一個(gè)對(duì)應(yīng)的初始值字段，將 value 設(shè)置成該字段钓试，其他的不變装黑。這種方案能很好的解決問(wèn)題，代價(jià)也不大弓熏。
wxml文件：
<view>
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" placeholder-class="placeholder" bindinput="inputTitle" value="{{titleOrigin}}" />
<textarea placeholder="請(qǐng)輸入內(nèi)容" placeholder-class="placeholder" bindinput="inputContent" value="{{contentOrigin}}" />
<button bindtap="save">保存</button>
</view>
js文件：
Page({
data: {
titleOrigin: '',
title: '',
contentOrigin: '',
content: ''
},
onLoad: function (opt) {
// 設(shè)置初始值
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;
// 提交請(qǐng)求
...
}
})
方案3：
采用表單提交的方法恋谭，跟之前一樣，不需要綁定 bindinput 或者 bindblur 等回調(diào)方法挽鞠，只需要在輸入框里面加上 name 屬性疚颊。
wxml文件：
<form report-submit="true" bindsubmit="save">
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" placeholder-class="placeholder" name="title" value="{{title}}" />
<textarea placeholder="請(qǐng)輸入內(nèi)容" placeholder-class="placeholder" name="content" value="{{content}}" />
<button class="button" form-type="submit">保存</button>
</form>
js文件：
Page({
data: {
title: '',
content: ''
},
onLoad: function (opt) {
// 設(shè)置初始值
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();
// 提交請(qǐng)求
...
}
})
一般來(lái)說(shuō)狈孔，如果表單提交的方法不被占用的話，推薦使用表單提交的方法材义，否則除抛，如果表單提交的方法需要用在別的地方(比如之前的文章《微信小程序消息重復(fù)推送》里面提到的postFormId)的話，則可以使用增加初始值字段的方法母截。
最后到忽，一般輸入框后面會(huì)加一個(gè)清空的圖標(biāo)，在有內(nèi)容時(shí)顯示清寇，以下是基本的實(shí)現(xiàn)喘漏。
wxml文件：
<form report-submit="true" bindsubmit="save">
<view class="info">
<view class="info-item first title">
<view class="label">標(biāo)題</view>
<input type="text" placeholder="請(qǐng)輸入標(biāo)題" 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">內(nèi)容</view>
<textarea placeholder="請(qǐng)輸入內(nèi)容" 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) {
// 設(shè)置初始值
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
})
// 提交請(qǐng)求
...
}
})
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;
}
