混合app获取Android和ios软键盘的高度

用的apicloud 其他的混合应该也能用
找了很多乱七八糟的资料 可以确定是没有公开的api让我获取软键盘高度东拼西凑出来了下面的东西 可以用的 效果不错 如果有那种手机不行的可以私聊我 让我学习一下
这个就是 输入框

 <textarea ref="textarea" id="textarea" @focus="focus" @click="emojiShow = false"
                            placeholder="说点什么吧..." v-model="content" id="textarea" class="message"
                            style="height: 3.6rem;"></textarea>
  const h = document.body.clientHeight
  var vm = new Vue({
    el: '#app',
        data: function () {
            return {
                keyboardHeight: 0,
                textBoxRect:{}
            }
        },
        methods:{
        init: function () {
                vm.$nextTick(function () {
                    if (api.systemType != "ios") {
                    //Android 安卓很简单根据页面被键盘顶起后获取
                        window.onresize = function () { // 如果当前窗口小于一开始记录的窗口高度,那就让当前窗口等于一开始窗口的高度
                            var keyboardHeight = h - document.body.clientHeight
                            if (keyboardHeight > 0) {
                                setTimeout(function () {
                                    vm.keyboardHeight = keyboardHeight
                                }, 0)
                            }
                        }
                    } else {
                    // ios 因为ios把界面顶起不会改变页面的大小而是会产生滚动条所有不能直接获取间接再间接获取 找到一个定位在底部的元素就是要被键盘顶起来的元素然后获取被顶起前的位置和被顶起后的位置比较一下就可以了 textBox 就是那个元素
                        vm.textBoxRect = textBox.getBoundingClientRect()
                    }
                    focusInput(function () {
                        if (api.systemType == "ios") {
                            var textBoxRect = textBox.getBoundingClientRect()
                            if (vm.textBoxRect.y - textBoxRect.y > 0) {
                                vm.keyboardHeight = vm.textBoxRect.y - textBoxRect.y
                            }
                        }
                    })
                })
            },}
  })
   apiready = function () {
    vm.init();
}
 function focusInput(callback) {
        // 使用模块弹出键盘
        vm.softInput = api.require('softInputMgr');
        vm.softInput.toggleKeyboard();
        // 将相应的输入框获取焦点
        document.getElementById("textarea").focus()
        if (!!callback) {
            callback()
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值