欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-20 14:38:10
...

用的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()
        }
    }