CODEWITHSUNDEEP
androidcordova
user966784
user966784

Reputation: 20

Show hide keyboard is not working propery in android phonegap

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

Upvotes: 1

Views: 5093

Answers (2)

John
John

Reputation: 8946

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

Upvotes: 0

coderslay
coderslay

Reputation: 14370

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>

Upvotes: 1

Related Questions