Monaca Onsen UI Discord Chat Github Repo

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>