Onfocus 事件未在 Android 上的 HTML <select> 框中触发答案

【问题标题】：Onfocus event not triggered in HTML <select> box on AndroidOnfocus 事件未在 Android 上的 HTML <select> 框中触发
【发布时间】：2012-07-02 15:07:28
【问题描述】：

我想监听 HTML <select> 下拉框的 onfocus 事件。除了原生 Android 浏览器（使用 Android 1.6 和 Android 2.3.3 测试）之外，所有浏览器都会触发 onfocus 事件。

我创建了以下代码来演示我的问题：

<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>

你也可以see this on jsfiddle。

如前所述，这适用于所有浏览器（使用当前版本的 Chrome、Firefox 和 Internet Explorer 进行测试），但不适用于原生 Android 浏览器。它还在 iPhone 3GS 上的移动 Safari 上工作。无论如何，onfocus 事件适用于所有浏览器上的 <input> 元素，也适用于 Android 原生浏览器。

如何使 onfocus 事件作用于 Android 浏览器中的 <select> 元素？

【问题讨论】：

标签： javascript jquery html javascript-events android-browser

【解决方案1】：

w4rumy 的回答非常适合我，谢谢。但是为了对抗 w4rumy 的代码“劣势”，我对其进行了一些改进。

要检查设备，只需执行以下操作：

 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!");
    }

【讨论】：

【解决方案2】：

This jQuery code 现在可以在 Android 设备上为我解决问题

$(document).ready(function(){
    $("#select").bind('mouseenter', function(event) {
      $(this).focus();
    });
    $("#select").bind('mouseleave', function(event) {
      $(this).blur();
    });
});

基本上，mouseenter 和 mouseleave 事件在 Android 设备上触发。我是通过logging all events 发现的，它是在select 元素上触发的。

好消息是，我仍然可以在 select 元素中使用 onfocus 事件。缺点是这段代码只能在安卓设备上执行。

【讨论】：

【解决方案3】：

在黑莓上遇到过一些类似的问题...

我的解决方法如下

<select onfocusin='DO SOMETHING' onfocusout="DO SOMETHING">

如果它不尝试应该可以工作

$('#SELECTID').focus(function(){
//code to do on focus here
});

工作：

http://jsfiddle.net/esbYy/4/

这也有效： http://jsfiddle.net/esbYy/6/

它是导致问题的焦点所在的 jQuery 代码。

希望对你有帮助

【讨论】：

I tried it using onfocusin，但这不起作用。 Also using jQuery for the onfocus 事件在 Android 浏览器上不起作用。
从外观上看，它是由于 andorids 自定义显示选择的方式，我唯一可以推荐的是尝试以下方法，onblur，onfocusin，onfocusout，onchange 并查看哪些有效并构建您的代码围绕它，因为我似乎找不到解决方法，但希望我有所帮助
尝试将 jqueyr 代码放在一个函数中，并在 focusin 或 out 或 onfoucs 上调用它
它可以在我的桌面浏览器上运行，但不能在运行 Android 2.3.3 的三星 Galaxy S 上运行。我还玩过 onclick （没用）和 ontouchstart （有时有效，也不能接受）。您是否在 Android 设备上尝试过？
是的，在我的感觉上试过了，我的 jsfiddle /6 一个完美的作品