Logo Questions Linux Laravel Mysql Ubuntu Git Menu

OnKeyPress, onKeyDown, onKeyUp events not fired in Firefox/Chrome under Android when typing letters

I have an issue with Firefox/Chrome under Android.

When I type text into an input box (see code below), the onkeypress, onkeyup, and onkeydown events are not fired when typing letters, but when typing "%" sign or pressing the space bar for example, it does.

In the Android "preinstalled" browser everything woks fine.

Another very rare thing, the behaviour is different if my cursor is not the last character... If my cursor is in the middle of the text, under Firefox all events are fired for any key. In Chrome event onkeyup and onkeydown are fired twice for one key pressed, but onkeypress is not fired.

I tested it on different devices, with similar issues.

I could not find any similar issue reported on Internet. Did someone already face this problem before? How did you fix it?

Sites like Amazon.com work fine for autocomplete, so there must be a workaround...

Please note the issue disapeared in recent versions of Firefox and Chrome

Many thanks in advance for your help.

<!DOCTYPE html>
<h1>onKeyXxx event test</h1>
<input type="text" onkeydown="alert('DOWN');" onkeypress="alert('Press');" onkeyup="alert('UP');">
like image 971
Cedric Simon Avatar asked Mar 20 '23 19:03

Cedric Simon

2 Answers

The setInterval did the trick.

Not sure yet how I will implement it inside Script.aculo.us (the library I use for autoselect drop down) but I will find a way.

Here is an example of the solution implementing setTimer :)

<!DOCTYPE html>
function checkTextChange(){
    if (document.getElementById("test").value != typedText){
        return true;
    } else {
        return false;
if (navigator.appVersion.indexOf("Android")>-1 && (navigator.appVersion.indexOf("Safari")==-1 || navigator.appVersion.indexOf("Chrome")>-1)){
    alert("Using work around");
    var myVar = setInterval(function(){checkTextChange();},200);
<body >
<h1>onKeyXxx event test</h1>
<input type="text" name="test" id="test"  onkeydown="checkTextChange();" onkeypress="checkTextChange();" onkeyup="checkTextChange();">
<div id="output"></div>
like image 68
Cedric Simon Avatar answered Mar 23 '23 07:03

Cedric Simon

You Can not Give alert Directly Follow any of the way from following

<input type="text" onkeydown="JavaScript:return alert('DOWN');">


<input type="text" onkeydown="return myFun();">

Where you can define your function between and tag anywhere in document.

like image 28
Dilip Suvagiya Avatar answered Mar 23 '23 09:03

Dilip Suvagiya