I want to listen for the onfocus-event of an HTML <select> dropdown box. The onfocus event is triggered in every browser except in the native Android browser (tested using Android 1.6 and Android 2.3.3).
I created the following code to demonstrate my issue:
<html>
<body>
<form>
<select onfocus='$("#info").html("you got the focus!")'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span id="info">No focus currently...</span>
</form>
</body>
</html>
You can also see this on jsfiddle.
As said, this is working in every browser (tested using current versions of Chrome, Firefox and Internet Explorer), but not in the native Android browser. It is also working on mobile Safari on iPhone 3GS. Anyway, the onfocus event works on <input> elements on all browsers, also on Android native browser.
How can I make the onfocus event working on <select> elements in the Android browser?
I want to listen for the onfocus-event of an HTML <select> dropdown box. The onfocus event is triggered in every browser except in the native Android browser (tested using Android 1.6 and Android 2.3.3).
I created the following code to demonstrate my issue:
<html>
<body>
<form>
<select onfocus='$("#info").html("you got the focus!")'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span id="info">No focus currently...</span>
</form>
</body>
</html>
You can also see this on jsfiddle.
As said, this is working in every browser (tested using current versions of Chrome, Firefox and Internet Explorer), but not in the native Android browser. It is also working on mobile Safari on iPhone 3GS. Anyway, the onfocus event works on <input> elements on all browsers, also on Android native browser.
How can I make the onfocus event working on <select> elements in the Android browser?
3 Answers
Reset to default 3w4rumy's answer worked perfectly for me, thank you. But to counter w4rumy's "disadvantage" with his code, I improved on it a bit.
To check the device, simply do:
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android");
if (isAndroid > -1) {
alert("Android!");
$("select").bind('mouseenter', function (event) {
$(this).focus();
});
$("select").bind('mouseleave', function (event) {
$(this).blur();
});
}
else {
alert("iPhone!");
}
This jQuery code does the trick for me now on Android devices
$(document).ready(function(){
$("#select").bind('mouseenter', function(event) {
$(this).focus();
});
$("#select").bind('mouseleave', function(event) {
$(this).blur();
});
});
Basically, mouseenter and mouseleave events are triggered on Android devices. I found this out by logging all events which are triggered on the select element.
The good thing is, that I still can use the onfocus event in my select element. The disadvantage is that this code must only be executed on Android devices.
Had a few similar problems with blackberry...
My work around was the following
<select onfocusin='DO SOMETHING' onfocusout="DO SOMETHING">
That should work if it doesnt why not try
$('#SELECTID').focus(function(){
//code to do on focus here
});
WORKING:
http://jsfiddle/esbYy/4/
This also works: http://jsfiddle/esbYy/6/
Its the jQuery code within your on focus causeing the issues.
Hope this helps