jQuery Mobile App & Cordova-Plugin-Keyboard Problem.

lammie1971

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>