欢迎光临,了解微信小程序开发,就上易用通!

小程序input的一些坑点

发布:2020-05-18 10:49浏览: 来源:网络 作者:huan

最近在开发中遇到的一些坑点

  1. 表单组件(input)如何阻止冒泡
  2. 在容器(fixed)中的input如何弹出键盘

阻止input冒泡

<view bind:tap="onTap" class="container">
    <input bindinput="onBindInput" type="text"/>
</view>
复制代码

上例中input操作会冒泡到container,导致onTap响应执行

修正

<view bind:tap="onTap" class="container">
    <input bindinput="onBindInput" type="text" catch:tap="empty"/>
</view>
复制代码

冒泡的问题是由input的tap事件导致,因此定义一个empty的空方法,使它响应input的catch:tap,来达到阻止input的冒泡的作用

在容器(fixed)中的input如何弹出键盘

<view class="container" style="position: fixed; bottom: 0">
    <input bindinput="onBindInput" type="text"/>
</view>
复制代码

container组件在屏幕底部出现,点击Input组件时,弹出的键盘会遮盖input输入框

修正

<view class="container" style="position: fixed; bottom: 0; {{mystyle}}">
    <input bindinput="onBindInput" bindkeyboardheightchange="onkeybord" type="text"/>
</view>
复制代码
Page({
    data: {
        mystyle: '',
    },
    
    onkeybord(e){
        let detail = e.detail
        let kbHeight = detail.height
        let tool = Pager.getElementsById('reminder-tool')
        if (kbHeight === 0) {
          this.setData({
              mystyle: ' '
          })
        }

        if (kbHeight && kbHeight > 0) {
            this.setData({
                mystyle: `bottom: ${kbHeight-40}px;`
            })
        }
    }
})





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。