一、微信小程序输入框离键盘高度
在小程序开发中,经常会遇到输入框与键盘高度的问题,特别是在不同设备上。而微信小程序官方提供了wx.getSystemInfo方法来获取不同设备的宽高,然后再通过页面的高度减去输入框距离底部的距离,即可得到键盘弹出时输入框应该上移的距离。
//获取系统信息
wx.getSystemInfo({
success: function (res) {
that.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight
});
}
});
//监听页面高度变化
wx.onWindowResize(function (res) {
that.setData({
windowHeight: res.windowHeight
});
});
//计算键盘高度
var query = wx.createSelectorQuery();
query.select('#input-box').boundingClientRect(function (rect) {
that.setData({
keyboardHeight: that.data.windowHeight - rect.bottom - 10
});
}).exec();
二、微信小程序键盘遮挡住输入框
当键盘高度超过输入框距离底部距离时,输入框会被键盘遮挡住,解决方法是在键盘弹出时自动上移页面,以及在键盘收起时自动恢复页面位置。
//监听键盘弹出
wx.onKeyboardHeightChange(function (res) {
that.setData({
pageHeight: that.data.windowHeight + res.height,
keyboardHeight: res.height,
bottom: res.height
});
});
//监听键盘收起
wx.offKeyboardHeightChange(function (res) {
that.setData({
pageHeight: that.data.windowHeight,
keyboardHeight: 0
});
});
三、微信小程序输入框键盘显示文字
微信小程序输入框支持设置placeholder,但是当输入框获取焦点并弹出键盘时,placeholder会被遮挡住,所以需要在键盘弹出时改变placeholder为输入的内容。
//监听输入框输入
bindInput(e) {
this.setData({
value: e.detail.value,
placeholder: ''
});
}
//监听键盘弹出
onKeyboardHeightChange() {
this.setData({
placeholder: this.data.value
});
}
四、微信小程序输入框传值
微信小程序输入框可以通过value属性来获取输入内容,也可以通过bindInput事件监听输入的内容变化。而传递输入框的值可以通过data来进行数据共享。
//在index.js
Page({
data: {
inputValue: ''
},
bindInput(e) {
this.setData({
inputValue: e.detail.value
});
}
});
//在index.wxml
<input type="text" bindinput="bindInput" value="{{inputValue}}" />
//在其他文件中
var inputVal = getApp().data.inputValue;
五、微信小程序输入框光标位置
微信小程序输入框在获取焦点后会自动弹出键盘,此时光标位置也会改变。可以通过设置selectionStart和selectionEnd属性来手动控制光标的位置。
//在onFocus事件中设置
bindFocus(e) {
this.setData({
selectionStart: e.detail.value.length,
selectionEnd: e.detail.value.length
});
}
//在模板中设置
<input type="text" bindfocus="bindFocus" selection-start="{{selectionStart}}" selection-end="{{selectionEnd}}" />
//在其他事件中获取光标位置
var selectionStart = e.detail.value.selectionStart;
var selectionEnd = e.detail.value.selectionEnd;
六、微信小程序输入框显示不出来
当微信小程序输入框显示不出来时,可能是由于页面布局导致的。可以通过微信小程序提供的调试工具来进行页面布局的调整,以解决输入框显示不出来的问题。
七、微信小程序输入框换行
微信小程序输入框可以通过设置textarea属性来实现多行输入,而换行则是通过按下回车键来实现。
八、微信小程序输入框获取数据
微信小程序输入框获取数据可以通过value属性或bindInput事件来实现,也可以通过setData来进行数据共享。
//在index.js
Page({
data: {
inputValue: ''
},
bindInput(e) {
this.setData({
inputValue: e.detail.value
});
}
});
//在其他事件中获取输入框的值
var inputVal = e.detail.value;
九、微信小程序输入框代码
微信小程序输入框的代码如下:
<input type="text" />
<input type="number" />
十、微信小程序输入框弹出数字键盘选取
微信小程序输入框弹出数字键盘选取可以通过设置type属性为number来实现。
<input type="number" />