Is it possible to detect a Javascript event triggered when the soft keyboard is opened within a phonegap app?

Is it possible for my JavaScript application to detect when the keyboard is opened using PGB?

I am working on a page with a text box positioned slightly below the vertical middle of the page. Once the user clicks on the textbox and focuses on it, the keyboard opens up and covers most of the textbox, leaving only the top 2 or 3 pixels visible.

If there was a way for me to determine when the keyboard is opened and which element currently has focus, I could potentially implement manual scrolling to adjust the position accordingly.

javascriptcordovadom-eventsandroid-softkeyboard

Answer №1

While I haven't had experience with phonegap specifically, I did encounter a similar issue in an Android webapp.

In Android devices, when the virtual keyboard pops up, the window.onresize event is triggered. One solution is to record the original viewport height when the app launches, allowing you to determine later if the virtual keyboard is open or closed based on the current viewport height.

Alternatively, since your problem pertains to an input element, you could also utilize the onfocus and onblur events for that specific element.

Answer №2

Once the onDeviceReady event is triggered in PhoneGap, you can implement the following code snippets:

document.addEventListener("hidekeyboard", keyboardHide, false);
document.addEventListener("showkeyboard", keyboardShow, false);

Additionally, don't forget to include the following line in your res/xml/plugins.xml file within your Android project:

<plugin name="SoftKeyBoard" value="org.apache.cordova.plugins.SoftKeyBoard" />

Answer №3

Make sure to include the following code in your Android manifest file:

android:windowSoftInputMode="adjustResize"

This code should be placed within the node of your manifest.

As recommended by w4rumy, adding this code will result in triggering the window.onresize event.

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

Troubleshooting undefined results with AngularJS ng-repeat filter

My objective is to create a Letter Filter, where users can click on buttons from A to Z to filter the displayed data. When clicking on the letter 'A' button, only data starting with 'A' should be shown. However, I have encountered an i ...

javascriptangularjsangularjs-ng-repeat

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

Navigate to a list item once Angular has finished rendering the element

I need to make sure the chat box automatically scrolls to the last message displayed. Here is how I am currently attempting this: akiRepair.controller("chatCtrl", ['$scope', function($scope){ ... var size = $scope.messages.length; var t ...

javascripthtmlangularjs

React State Property that looks at properties within its own scope

Can a property within the React state object reference its own properties? Consider the example below: this.state = { currentTotal: 30, columnLength: Math.ceil(this.currentTotal / 3), // Resulting in NaN. } ...

javascriptreactjsecmascript-6

There was an issue with retrieving the image URL from the source, causing an error message to display: "

I encountered an error while trying to access my product. Here is the error message https://i.stack.imgur.com/fTmL0.png It seems that the image URL from the sanity database cannot be rendered, even though it worked fine in the tutorial I was following. I ...

javascriptreactjsnext.js

Is there a way to control a single Angular application using multiple JavaScript scripts?

Summary: I am looking for a way to allow two script files to handle different tasks within the same angular app. One needs to initialize the app, while the other needs to assign a templateCache object to a section of JSON stored in localStorage. Backgrou ...

javascripthtmlangularjs

Updating HTML content using jQuery by iterating through an array

When I write the following HTML code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <h1 id="message"> </h1> and include the corresponding JavaScript code: messages = ["Here", "are", ...

javascriptjqueryarrays

Using jQuery to call a function in processing.js from JavaScript or jQuery

I have set up an application that needs to call a processing.js function, but I am having trouble accessing the processing instance. Here is my setup - in my HTML, I have a link that, when clicked, should trigger the processing function: <div id="wrapp ...

javascriptjqueryprocessingprocessing.js

The button must be programmed to remove a specific item from the server

I am currently developing an application to monitor my expenses using javascript, nodejs, express, and handlebars as the templating engine. Within the app, I have a "list" div that displays all of my expenses. (There is an add button next to the list, not ...

javascripthtmlnode.jsexpressexpress-handlebars

A guide on implementing nested view objects in ui-router for angular applications

Unfortunately, I am not well-versed in Angular. My objective is to display multiple views on a user profile page using ui-router. These are my current routes: (function() { 'use strict'; angular .module('app.routes') .config(r ...

javascriptangularjsangular-ui-router

How to Enhance GraphQL Mutation OutputFields with a Function Generator

I'm encountering issues while trying to incorporate a function generator within a GraphQL mutation. The function generator is utilized to streamline the promise chain inside the mutation. Prior to refactoring the code, everything was functioning corr ...

javascriptnode.jsgeneratorgraphqlrelayjs

Check each field in a loop and if validation for any field fails, then return false using jQuery

Having trouble resetting the flag variables when it comes to form validations. I seem to be missing something crucial. I'm dealing with a form that has multiple text fields. I want to validate each field on blur and prevent form submission if any val ...

javascriptjquery

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

My API endpoint for the post operation query using mongoose is not returning the updated array after adding a new item. I have been struggling with this issue for 3 days without any success. Any help would be greatly appreciated. router.post("/:spot ...

javascriptnode.jsmongodbexpressmongoose

Mongoose failing to persist subdocument

After trying to insert into my collection, I noticed that the sub-document is not being saved along with it. This issue has left me puzzled. This is the scheme/model I am working with: import { Schema, Document, Model, model } from 'mongoose' ...

javascriptmongodbtypescriptmongooseinsert

Experimenting with code within a window event listener function

I have a component in my AngularJS application that is functioning correctly. However, when it comes to test coverage, everything after the 'window.addEventListener('message',' part is not being covered. Should I create a mock object f ...

javascriptangularjseventsmocking

Guide on Incorporating Coffeescript into the Node.js Blueprint Framework

Have you checked out Skeleton (https://github.com/dstroot/skeleton) yet? It appears to be a robust framework for node.js, offering all the middleware you need. However, it seems to lack support for coffee script. How can we incorporate it into our project? ...

javascriptnode.jsexpresscoffeescriptgulp

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Is there a way to accomplish this? <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="14-March-2016" ...

javascriptjqueryhtml

Arranging a list based on the child property in a React component

Within my application, I have an array mapped to a map that generates a div with a data-date attribute as shown below: It's worth noting that the array cannot be sorted here since there are no dates available for comparison, only the element ID cons ...

javascriptreactjs

The PointerLockControls feature seems to be failing to actually lock my pointer

Uncaught TypeError: THREE.PointerLockControls is not a constructor I'm facing an issue with using firstperson controls and I can't seem to figure out the reason behind it. It's really throwing me off. const THREE = require('THREE&ap ...

javascriptthree.js

Verify authentication on a SignalR console application using a JavaScript client

Here is the scenario and solution I am currently working on: In project one, I have a SignalR console application that handles the logic, including authentication using Entity Framework to query the database. In project two, I have an ASP.Net web applicat ...

javascriptc#asp.netangularjssignalr