jQuery Mobile App & Cordova-Plugin-Keyboard Problem.
-
I am writing a small app with jQuery Mobile that I want to include CJPearson’s Cordova-Plugin-Keyboard https://www.npmjs.com/package/cordova-plugin-keyboard. I can install the plugin Ok but I do not know how to configure it correctly.
For example, I want to stop disable scrolling in shrink view and but I do not know where to place it within my code.
Thanks in advance.
PS, I have attached the code (with dummy content) from my index file below, (apologies as I did not know how to attach and upload the file).
<html> <head> <meta charset="utf-8"> <meta name="viewport" viewport-fit="cover" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"> <script src="lib/jquery/jquery-1.12.4.min.js"></script> <script src="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> document.addEventListener('deviceready', deviceReady, false); function deviceReady(){ alert("WE ARE READY!!"); Keyboard.shrinkView(false); Keyboard.disableScrollingInShrinkView(true); }; </script> </head> <body class="ui-mobile-viewport ui-overlay-a"> <div data-role="page" id="one" data-url="one" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style=""> <div data-role="header" role="banner" class="ui-header ui-bar-inherit" data-position="fixed"> <h1 class="ui-title" role="heading" aria-level="1">Multi-page</h1> </div><!-- /header --> <div role="main" class="ui-content"> <h2>One</h2> <input type="text" /> <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">Show page "two"</a></p> <br/><br/><br/><br/>Stop from scrolling when the keyboard is shown <br/><br/><br/><br/>Stop from scrolling when the keyboard is shown <br/><br/><br/><br/>Stop from scrolling when the keyboard is shown <br/><br/><br/><br/>Stop from scrolling when the keyboard is shown <br/><br/><br/><br/>Stop from scrolling when the keyboard is shown <br/><br/><br/><br/>Stop from scrolling when the keyboard is shown </div><!-- /content --> <div data-role="footer" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a" data-position="fixed"> <h4 class="ui-title" role="heading" aria-level="1">Page Footer</h4> </div><!-- /footer --> </div><!-- /page one --> </body> </html>