4

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>
<html>
<head>
</head>
<body>
<h1>onKeyXxx event test</h1>
<input type="text" onkeydown="alert('DOWN');" onkeypress="alert('Press');" onkeyup="alert('UP');">
<hr/>
</body>
</html>
Cedric Simon
  • 4,571
  • 4
  • 40
  • 52
  • How about `onchange`? It should work as this is not `key` dependent event. – antyrat Jan 30 '14 at 15:53
  • Onchange wonn't help. I want to do an autoselect filtering values while typing. – Cedric Simon Jan 30 '14 at 16:55
  • Ok, and what about `setInterval` and checking periodically for new value for about each 500 milliseconds? – antyrat Jan 30 '14 at 16:56
  • Ok, no rush, you still have 7 days for your bounty, maybe someone will find more elegant solution or will be able to describe your problem more specifically ;) – antyrat Jan 31 '14 at 00:34
  • A related question: http://stackoverflow.com/q/14194247/2157640 – Palec Feb 05 '14 at 23:37
  • Maybe a related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=695626 – Palec Feb 05 '14 at 23:43
  • @Palec: Thanks for the tip. related to stackoverflow.com/q/14194247/2157640 : word suggestion off solved it under FF, not under Chrome. But since I can't ask users to change setting to have a working site, I'll try to implement a workaround like the one below. – Cedric Simon Feb 06 '14 at 00:22
  • This bounty generated 2 good answers: one solving the specific code issue (bounty), the other one giving a possible work around (not specific, but good to have in mind as could solve also other problems). Unfortunately none allowed me to quick fix the script.aculo.us source code (not part of the question), so I'll possibly rewrite a small library for this autoselect function, using the knowledge acquired in both answers. Thanks to all for your constructive input. – Cedric Simon Feb 06 '14 at 14:37

2 Answers2

4

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>
<html>
<head>
<script>
typedText="";
function checkTextChange(){
    if (document.getElementById("test").value != typedText){
        typedText=document.getElementById("test").value;
        document.getElementById("output").innerHTML=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);
}
 </script>
</head>
<body >
<h1>onKeyXxx event test</h1>
<form>
<input type="text" name="test" id="test"  onkeydown="checkTextChange();" onkeypress="checkTextChange();" onkeyup="checkTextChange();">
</form>
<div id="output"></div>
<hr>
</body>
</html>
Cedric Simon
  • 4,571
  • 4
  • 40
  • 52
3

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

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

OR

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

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

Dilip Suvagiya
  • 396
  • 1
  • 4
  • 14
  • Then why does it work when I press a space of % key, or when I write inside a word? – Cedric Simon Feb 06 '14 at 13:20
  • Try this practice it may resolve your problem , sometimes java script arise a conflicts when you have done minor mistake , do better you try this.. – Dilip Suvagiya Feb 06 '14 at 13:34
  • DID WORK :D. At least for keydown and keyup under Chrome, all 3 under FF. Thanks a a lot. Now I will have to dig into the "real" code (scriptaculous autoselect), that is not firing just an alert, to see how I can solve it. I'll let you know the outcome, but your trick did it for the given code. THANKS. – Cedric Simon Feb 06 '14 at 13:45
  • You are Welcome ,, Now you Please mark this answer as correct so other people can use this. – Dilip Suvagiya Feb 06 '14 at 13:47