Menu
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>
971
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>
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
