【apicloud】实现APP底部导航适应软键盘高度

apicloud开发APP时遇到需求,在页面底部加入一个输入导航,需要能适应软键盘,在软键盘弹出时自动浮于软键盘上方。

apicloud提供的解决方案:

安卓:

于config.xml中加入

<preference name="softInputMode" value="resize"/>


IOS:

于openWin、openFrame时加入参数 softInputMode: 'resize'

api.openWin({
    name:'main',
    url:'main.html',
    softInputMode: 'resize'
})


不过在添加后发现依然存在无法适应高度的问题。


解决方案:


页面通过win+frm的结构实现,底部导航做于win中,frm则用于渲染具体页面内容。

在win中加入如下监听方式,通过监听输入框的点击与焦点事件触发对应的openWin高度重新计算事件,来调整页面的高度实现底部导航弹动。

    //********************实现软键盘呼出后自定改变页面大小**********************
    var timer, windowInnerHeight;
    var header = $api.byId('aui-header');
    var footer = $api.byId('aui-footer');
    var headerPos = $api.offset(header);
    var footerPos = $api.offset(footer);
    function eventCheck(e) {
        if (e) { //blur,focus事件触发的
            changeFrm();
            if (e.type == 'click') {//如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮,没有点击这个按钮的事件可用,keydown中也获取不到keyCode值
                setTimeout(function () {//由于键盘弹出是有动画效果的,要获取完全弹出的窗口高度,使用了计时器
                    windowInnerHeight = window.innerHeight;//获取弹出android软键盘后的窗口高度
                    timer = setInterval(function () { eventCheck() }, 100);
                }, 500);
            }
            else clearInterval(timer);
        }
        else { //计时器执行的,需要判断窗口可视高度,如果改变说明android键盘隐藏了
            if (window.innerHeight > windowInnerHeight) {
                clearInterval(timer);
                changeFrm();
            }
        }
    }
    $('你对应的输入框的class或者id').click(eventCheck).blur(eventCheck);

    function changeFrm(){
        setTimeout(function () {
            api.setFrameAttr({
                name: '你的frame名称',
                rect: {
                    x: 0,
                    y: headerPos.h,
                    w: 'auto',
                    h: window.innerHeight - headerPos.h - footerPos.h
                },
                softInputMode: 'resize',
                bounces: true
            });
        }, 400);
    }
    //********************实现软键盘呼出后自定改变页面大小**********************


上例通过jQery+api实现的,可根据自己项目需求进行调整。


翻滚的胖子博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论