微信小程序输入框

发布时间：2023-05-19

一、微信小程序输入框离键盘高度

在小程序开发中，经常会遇到输入框与键盘高度的问题，特别是在不同设备上。而微信小程序官方提供了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" />
<textarea></textarea>

十、微信小程序输入框弹出数字键盘选取

微信小程序输入框弹出数字键盘选取可以通过设置type属性为number来实现。

<input type="number" />
推荐文章