微信小程序input详解

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文:

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

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

问题与解决方法:

 

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

用到的事件和属性:

bindfocusEventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持
bindblurEventHandle 输入框失去焦点时触发,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-positionBooleantrue键盘弹起时,是否自动上推页面
bindfocusEventHandle 输入框聚焦时触发,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-spacingNumber0指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

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

代码:

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

input很简单? 呵呵!!!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗?打赏鼓励一下?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值