3. jQuery Mobile App & Cordova-Plugin-Keyboard Problem.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

jQuery Mobile App & Cordova-Plugin-Keyboard Problem.

  • L

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