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 work fine for autoplete, 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>
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. work fine for autoplete, 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>
-
How about
onchange? It should work as this is notkeydependent event. – antyrat Commented Jan 30, 2014 at 15:53 - Onchange wonn't help. I want to do an autoselect filtering values while typing. – Cedric Simon Commented Jan 30, 2014 at 16:55
-
Ok, and what about
setIntervaland checking periodically for new value for about each 500 milliseconds? – antyrat Commented Jan 30, 2014 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 Commented Jan 31, 2014 at 0:34
- A related question: stackoverflow./q/14194247/2157640 – Palec Commented Feb 5, 2014 at 23:37
2 Answers
Reset to default 4The 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>
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.