Show hide keyboard is not working propery in android phonegap

Question

i follow this link to use the keyboard event by using [Simon mac donald Defination][1] In that event i show my footer when keyboard hide and hide my footer when keyboard is show.when click the dictonary my keybord is show but the event is goes to keyboard hide function(so my footer is shown) ..i dont know why..

i attached my code and design .Kindly solve this issue

   <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>

images

I checked... This works absolutely Fine.... Infact you are using it in a wrong way — coderslay, Jul 27 '12 at 11:52
Thank you for replying Coder,,,,Whats my wrong kindly guide me..its working fine but when i click the dictionary my footer comes up why...its go to keybord hide function but my keyboard is shown — user966784, Jul 27 '12 at 11:56
when i click the space bar and when i click the dictionary its not working properly in my Tab(samsung Galaxy tab 2.0) — user966784, Jul 27 '12 at 12:02

score 1 · Accepted Answer · answered Jul 27 '12 at 12:04

Remove the .ready() function and add the listeners in the deviceready

<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>

hmmm i see there is a bug here – coderslay Jul 27 '12 at 12:53 — coderslay, Jul 27 '12 at 12:53

score 0 · Answer 2 · answered Jun 19 '13 at 05:25

Try it in 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();
 }

Show hide keyboard is not working propery in android phonegap

2 Answers2

Linked