微信小程序input详解

左边扫码随时向我提问，上方有QQ群，有兴趣的可以加！！！

我在开发过程中，遇到了一些常见的问题，希望通过这篇文件帮助大家避坑···

问题与解决方法：

 

1.写输入框的时候，想实时获取输入框的焦点

用到的事件和属性：

bindfocus

EventHandle

输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持

bindblur

EventHandle

输入框失去焦点时触发，event.detail = {value: value}

解决方法：在input写上面的两个事件，然后setData .

代码：

    <input type="text" bindblur='no_focus' bindfocus="focus" />

  // 获取到焦点
  focus:function(e){
    var that = this;
    console.log(e.detail.height)
    this.setData({
      focus: true,
      input_bottom: e.detail.height
    })
  },
  // 失去焦点
  no_focus: function (e) {
      this.setData({
        focus: false
      })
  },

 

2.用户在使用输入框时手机输入法的键盘会往上划动，导致页面错乱或者闪屏。

用到的事件和属性：

adjust-position

Boolean

true

键盘弹起时，是否自动上推页面

bindfocus

EventHandle

输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持

解决方案：组件键盘自动上推，然后获取手机键盘的高度，使用定位解决。

解决方法：给 input 添加 bindfocus 事件并添加 adjust-position='{{false}}'  属性， 通过bindfocus事件获取到输入框的高度，然后再给输入框绝对定位，距离底部的高度登录获取到的高度。

代码：

    <input style='position: absolute; bottom:{{input_bottom}}px' type="text" adjust-position='{{false}}' bindfocus="focus" />

  focus:function(e){
    console.log(e.detail.height)
    this.setData({
      focus: true,
      input_bottom: e.detail.height
    })
  },

 

3.用户在使用键盘时，键盘顶部将输入框底部的边框遮挡了，导致下边框消失

用到的时间和属性：

cursor-spacing

Number

0

指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

解决方法：通过 cursor-spacing 调整键盘与输入框的距离。

代码：

    <input type="text" cursor-spacing='5' />

input很简单？ 呵呵！！！