当前时间:Sunday 2016年12月04日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> Android开发,phonegap开发 >> 正文

phonegap:软键盘的隐藏和显示

 

phonegap开发过程中如果遇到表单页面,会出现这样的情况,点击输入框,会弹出软键盘,输入内容,然后按返回键就回去隐藏软键盘,但是同时页面也会随之返回上一个页面。如何解决这个bug呢?

 

首先明确2个方法:

document.addEventListener(‘backbutton’,eventBackButton, false);重置返回键监听

document.removeEventListener(‘backbutton’,eventBackButton, false); 取消返回键监听

那么解决办法就是:在输入的时候去掉返回键监听,这样按下返回键就不会返回上一页,然后在加上返回键监听就行了。

 

废话不说接着看:

html“

 

<form  id="form_buy">
             <p>您的姓名:<input type="text" name="consumer_name"class="inputClass consumer_name" onFocus="add();" onBlur="document.addEventListener(‘backbutton’,eventBackButton, false);"> <span class="need">*</span></p>

<p><input type="submit" value="订购" id="bmit" class="ui-btn ui-btn-fullsize" onclick="buy();return false;"></p>
           </form>

 

js:

function add(){document.removeEventListener(‘backbutton’,eventBackButton, false);
            document.addEventListener(‘backbutton’,bb, false);
            }
        function bb(){
                var oInput = document.getElementById("bmit");
                oInput.focus(); 
            }

这里面我用来 onfocus 和 onblur,即:在光标聚焦到input上是去掉监听这样返回键就失去效果,而input失去焦点的时候在增加上监听,这样就可以。

但是问题还是来了 即使去掉了监听,按返回键软键盘隐藏了,但是光标依然还在input上面,这时再按返回键却不能返回上一个页面,因为’backbutton’ 已经没有监听了事件了,所以我这里就在第一次按下返回键的时候,把焦点移动掉其他没有加onfcuos的input上面,这样就可以完美实现表单页面显示和隐藏软键盘,同时依然可以返回上一页的效果。

作者:夜阑小雨
原文链接:phonegap:软键盘的隐藏和显示
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

评论信息

1 条评论 发表评论
  1. 博主我崇拜你

发布评论

您必须登录才能发表评论。

网站客户端下载