Question

我按照此链接使用键盘事件[Simon mac donald Defination] [1]在那个事件中，当键盘隐藏并显示键盘时隐藏我的页脚时，我会显示我的页脚。点击 dictonary < / strong>我的键盘是显示，但事件是键盘隐藏功能（所以我的页脚显示）..我不知道为什么..

我附上了我的代码和设计。坚决解决这个问题

<script type="text/javascript"> $(document).ready(function () { document.addEventListener("hidekeyboard", onHide, false); document.addEventListener("showkeyboard", onShow, false); }); function onHide() { $("#footer").show(); } function onShow() { $("#footer").hide(); } </script> <style type="text/css"> #footer { position:absolute; bottom:0; left:0; width:100%; height:7%; background-color:#00458D; padding:0; border-width:3px; padding-top:3%; padding-bottom:2%; padding-right:0px; padding-left:0px; background-color:#00458D; } #content { position:absolute; bottom:0; top:0; width:100%; overflow:auto; } </style> </head> <body > <div id="content"> <input type="text" style="width=70%"> <br/> <br/> <div id="footer" align="center"> <table width=100%> <input type="image" src="../images/Home.PNG" style="width:23%" onClick="home()"/> <input type="image" src="../images/messages-menu.jpg" style="width:23%" onClick="inbox()"/> <input type="image" src="../images/settings-menu.jpg" style="width:23%" onClick="settings()"/> <input type="image" src="../images/close-menu.png" style="width:23%" onClick="callServiceFunction()"/> </table> </div> </div> </body> </html>

图片

Answer 1

删除.ready()功能并在设备准备中添加侦听器

<style type="text/css">

#footer {
    position:absolute;
    bottom:0; left:0;
    width:100%;
    height:7%;
    background-color:#00458D;
    padding:0;
    border-width:3px;
    padding-top:3%;
    padding-bottom:2%;
    padding-right:0px;
    padding-left:0px;
    background-color:#00458D;
}

#content {
    position:absolute; bottom:0;
    top:0;
    width:100%;
    overflow:auto;
}
</style>
<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);

    function onDeviceReady () {
        document.addEventListener("hidekeyboard", onHide, false);
        document.addEventListener("showkeyboard", onShow, false);

    }
    function onHide() 
    {
        $("#footer").show();
    }

    function onShow() 
    {
        $("#footer").hide();
    }
    </script>

  </head>
 <body >
    <div id="content">

        <input type="text" style="width=70%">
            <br/>
            <br/>

        <div id="footer" align="center">
            <table width=100%>
                <input type="image" src="../images/Home.PNG" style="width:23%" onClick="home()"/>
                <input type="image" src="../images/messages-menu.jpg" style="width:23%" onClick="inbox()"/>
                <input type="image" src="../images/settings-menu.jpg" style="width:23%" onClick="settings()"/>
                <input type="image" src="../images/close-menu.png" style="width:23%" onClick="callServiceFunction()"/>
            </table>
        </div>
    </div>
  </body>
</html>

Answer 2

在OndeviceReady（）

中试用

 $(document).ready(function () 
 {
      document.addEventListener("deviceready", onDeviceReady, false);
 }
 function onDeviceReady()
 {

     document.addEventListener("hidekeyboard", onHide, false);
     document.addEventListener("showkeyboard", onShow, false);

 }
 function onHide() 
 {
       $("#footer").show();
 }
 function onShow() 
 {
       $("#footer").hide();
 }

在android phonegap中显示隐藏键盘无法正常工作

2 个答案: