Issue with Cordova keyboard plugin: the native.keyboardopen event is not being triggered. Is there a way to prevent scrolling when the

I'm currently working on a hybrid app using Cordova and Angular. My goal is to prevent users from scrolling when the keyboard is open.

Although the cordova keyboard plugin from ionic, ionic-plugin-keyboard, offers events for both opening and closing the keyboard, I've encountered an issue where the event for keyboard closure never triggers.

In my angular run script (within app.run(function...), I have included the following code:

document.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    alert("keyboard open"); //This alert doesn't appear
    $cordovaKeyboard.disableScroll(true);
}

window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    alert("keyboard closed"); //This alert works as intended
    $cordovaKeyboard.disableScroll(false);
}

The 'native.keyboardshow' event handler does not function, while the 'native.keyboardhide' event consistently triggers.

After researching online, I found information suggesting that the app should not be in Fullscreen mode. I tried adding the following line to my config.xml:

<preference name="Fullscreen" value="false" />

However, this did not resolve the issue, even after experimenting with setting the value to true as well. Has anyone else encountered this problem? My Cordova version is 6.0.0.

Answer №1

Make sure to properly register your listener with the window object, just like you did for the 'native.keyboardhide' event:

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    alert("The keyboard is now open"); //Unfortunately, this alert never appears!
    $cordovaKeyboard.disableScroll(true);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging @click within dropdown selections - Vue.js 2

Is there a way to implement the @click event in select options? Currently, I have the following: <button @click="sortBy('name')">sort by name</button> <button @click="sortBy('price')">sort by price</button> Th ...

Load content within the DIV container

I need help finding code that can use JQuery to load a page into a DIV element. Essentially, I want to load displaycatch.php into a specific DIV <div id="results">Content for id "results" Goes Here</div> Furthermore, I would like to add a ...

Tips on adding a watermark to multi-page PDFs using an image as the watermark

I am currently working on embedding a watermark onto every page of a PDF file using the image-watermark library. So far, I have successfully added a text watermark to files with only one page but now I am exploring ways to extend this functionality for mul ...

Tips for transferring Json data through Ajax in jquery for an html element?

I am facing an issue while trying to display data from 5 rows of a MySQL database in a table using the success function of a jQuery AJAX call. The data is returned in JSON format. Problem: I am able to retrieve only one row at a time, even though the cons ...

What is the proper way to provide parameters for express.use to avoid encountering a type error?

When attempting to use the path string in this code snippet within the function, an error is thrown. The argument type string cannot be assigned to the parameter type RequestHandler<RouteParameters>    The assigned type does not contain call si ...

Vue has limitations when it comes to applying Template Syntax to buttons

Trying to make sense of the code in my Vue Component. All elements display the template from {{ title }}, except for one lone button that stubbornly shows the template syntax as plain HTML. See Generated Page for reference Snippet of My Code: <templat ...

Sinon.stub functions as expected in karma and mocha when using Chrome, however it encounters issues when running in head

In my current project with AngularJS, I have implemented a feature where scrolling on an element triggers the scrollTop() function to determine if another method needs to be executed. I created a sinon.stub for this purpose: scrollTopStub = sinon.stub($. ...

Arrangement of div elements tailored to fit the size of the viewport

I am working on creating a grid of divs that will cover the entire viewport. To start, I want to have a grid that is 7 divs wide and 10 divs high. Below is the code snippet I've written so far to set the size of the div elements: function adjustHeig ...

Combining AngularJS 2 within an existing Symfony 2 project

We are currently in the process of transitioning an old Flex project to HTML5. In order to do this, we are creating a proof of concept in AngularJS2 and looking to integrate services with our existing PHP Symfony 2 backend. However, we are experiencing ses ...

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

Guide on populating a series of rectangles in a line based on values stored in an array using d3.js

I have 100 rectangles arranged in a 10x10 square. My goal is to assign colors to the rectangles based on values from an array var avg = [1, 4, 4, 7, 11, 15, 58] I'm facing an issue at the value 4 being repeated and I find the current code quite mess ...

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

Angular error: 'service not defined' factory issue

Looking for help with setting up an Angular factory to store animation functions. When I attempt to do so, I keep getting 'service is not defined' error in the console. For reference, here's a codepen link: http://codepen.io/tplummerptc/pen/ ...

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

Implementing the History API to dynamically load content into a div using Ajax

On my WordPress site, I have post content that loads into a div using AJAX when a user clicks on it. Now, I'd like to update the URL for the current post without using hashes. How can I achieve this with my JavaScript? JavaScript: jQuery(docum ...

Adjust the DIV shape to fit perfectly within the browser window without overlapping with any other elements

http://jsbin.com/iGIToRuV/1/edit Currently, I am working on developing a WYSIWYG website designer as part of an experimental project for various purposes. The ultimate goal is to ensure that it is both desktop and mobile-friendly. However, I have encount ...

Changing a C# Datetime type to a Date using javascript in an ASP.NET MVC Razor web application

Having trouble converting dates in JavaScript? Check out this code snippet: $(document).ready(function () { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); ...

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Check out this link for testing: http://jsfiddle.net/EnJSM/ You might observe that by removing "color: #6CB5FF;", the transition behaves differently - it only works for the second part of the line. I'm interested to see what solution you come up wit ...

What are the benefits of refraining from calling functions in AngularJS views to showcase data in a more objective manner?

In our work application, we have a function that generates various objects inheriting methods from a prototype. To summarize, this function creates instances of the MileCounter object. Here is an example: function MileCounter(totalMilesRan, numOfDaysToRu ...

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...