Keypress event not triggering in Android WebView when using HTML input

There seems to be a variety of issues on certain devices, such as Samsung and others, depending on the Android version, WebView version, and keyboard being used:

  • keypress events are not triggered
  • keydown and keyup events always show keyCode=229
  • keypress and input events are fired but do not capture the key pressed
  • textInput events do not work
  • The maxlength attribute is not honored on input[type=text], allowing more characters to be entered than allowed, with validation only occurring upon form submission

Is there a solution to address these issues?

javascriptjavaandroidinputwebview

Answer №1

I discovered a solution to resolve various issues within the WebView by extending it and overriding the onCreateInputConnection method:

public class WebViewExtended extends WebView {
    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
        // This line fixes some issues but introduces others, YMMV.
        // super.onCreateInputConnection(outAttrs);

        return new BaseInputConnection(this, false);
    }
}

Before making changes to onCreateInputConnection:

https://i.sstatic.net/PSnEb.png

After overriding onCreateInputConnection (when g was pressed):

https://i.sstatic.net/LaeWb.png

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

Displaying two div elements horizontally using Material-UI

Can the styled utility from mui be used to align 2 divs side by side? The documentation examples don't seem to cover this specific scenario. While answers on this and this address it, they don't relate to mui / material ui. I attempted the fol ...

javascriptreactjsmaterial-ui

Instructions for removing the status bar from the configuration file

Struggling to remove the status bar that's covering my header in my Phonegap-wrapped HTML5 mobile app. I've tried adding preferences to the config.xml file, but still no luck. Here's what I added: <preference name="fullscreen" value="tr ...

javascriptjqueryiosjquery-mobilecordova

"Bringing the power of JavaScript to your WordPress

I have set up a wordpress page and integrated some JavaScript into it. When working in wordpress, there are two tabs on a page where you can input text - 'Visual' and 'Text'. The 'Text' tab is used for adding HTML and scripts ...

javascripthtmlwordpress

Inject fresh variable values into the serialization process

Within my login form, I have fields for Username and Password. Upon clicking the login button, a Javascript function is triggered to make an ajax request to the login controller. To serialize the form data, I used the code snippet below: var parameters = ...

javascriptjquery

Determining when a latch has completed its task

Having two threads with a CountDownLatch set to 1 means that when the first thread finishes, the second one should start. Once the second thread completes its task, I want to combine the data computed by both threads for further operations. My question is ...

javamultithreadingexecutorservicecountdownlatch

Is it possible to integrate a comprehensive full text search capability on a static website directly on the client side, without reliance on a database

There is a script that I came across, possibly in npm's source code, but I didn't write it myself. I'm intrigued by the idea of refactoring this code to potentially enable a quick web crawl of a static site and generate a list of URLs leadin ...

javascriptnpmfull-text-searchrefactoringstatic-site

How can we include a string in the request body in Node.js using Express?

My reverse proxy is functioning properly: app.post('/geoserver', function (req, res) { apiProxy.web(req, res, {target: serverOne}); }); The request already contains a body like this: https://i.sstatic.net/riRBe.png I want to append a stri ...

javascriptnode.jsexpressproxy

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

Unable to declare a string enum in TypeScript because string is not compatible

enum Animal { animal1 = 'animal1', animal2 = 'animal2', animal3 = 'animal3', animal4 = 'animal4', animal5 = 'animal5' } const species: Animal = 'animal' + num Why does typescr ...

javascripttypescript

Node.js Request Encoding Using Google Translate

I have developed a node.js module to use the Google Translate API. module.exports = function(sourceText, sourceLang, targetLang, callback) { var qst = qs.stringify({ client: 'gtx', sl: sourceLang, tl: targetLang, ...

javascriptnode.jsgoogle-translate

Ways to verify the functionality of a webpage once it has been loaded on my local machine's browser

I manage a website that is currently hosted on a server and being used by thousands of visitors. The site is created using Java and soy template technology. I am looking to test the frontend rendering and JavaScript files. Can this be done directly from my ...

javascriptnode.jsjasminejestjsmocha.js

Tips for Sending <Div> Data to a Servlet

I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...

javascriptjqueryhtmlservlets

What is the process to designate the default profile for registering beans in Spring framework?

Consider the following: <beans ... namespace declarations> <bean id="foo" class="com.example.foo" /> <beans profile="abc"> <bean id="bar" class="com.exmaple.bar" /> </beans> </bean> What profil ...

javaspring

Automatically update data in Angular without the need to refresh the page

One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...

javascriptajaxangulartypescriptdynamic

The skybox in Three.js appears to be malfunctioning following a camera rotation

Working with JavaScript, I am attempting to build a basic skybox inspired by this demo. Everything is going smoothly except for one issue - when I rotate the camera (using orbitControls.js) and the z value is not at its minimum, the textures start to glitc ...

javascriptthree.js

The application of Uglify to eliminate console logs can be inconsistent in its effectiveness

Having some trouble with my Vue3 app. I've implemented UglifyJS to remove console.logs in production environments, but it seems to be inconsistent. Sometimes it works fine, other times not so much. Every time I have to rebuild and hope for the best. I ...

javascriptvue.jsnpmuglifyjsvuejs3

Executing TipTap commands from a script tag in Vue 3: A step-by-step guide

One of the components I'm working with includes the following: <button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button> <input type="file" ref="image" sty ...

javascriptvue.jsvuejs3rich-text-editortiptap

What is the correct way to utilize a variable as a parameter in React Query while employing the axios.request(options) method?

I'm currently working on a React Query component with the following structure: function test () { const [var, setVar] = useState("") const options = { method: "GET", url: "https://api.themoviedb.org/3/search/tv" ...

javascriptreactjstypescriptreact-typescriptreact-query

The Reactjs dependency tree could not be resolved

In my current project, I've been attempting to integrate react-tinder-card. After running the command: npm install --save react-tinder-card I encountered this error in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency ...

javascriptreactjsnpmpackagetinder

Determine whether a JavaScript string exclusively consists of punctuation marks

In an if statement, I want to verify whether the given string contains any punctuation. If it does contain punctuation marks, I intend to display a pop-up alert message. if((/*regex presumably*/.test(rspace))==true||(/*regex presumably*/.test(sspace))==tr ...

javascriptif-statementpunctuation