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实现的,可根据自己项目需求进行调整。
本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com