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

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

apicloud提供的解决方案：

安卓：

于config.xml中加入

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实现的，可根据自己项目需求进行调整。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自翻滚的胖子博客iskeys.com