javascript - 如何在iOS6中关闭选择器onchange事件的下拉菜单？

Question

我正在使用 worklight 开发混合应用程序。

点击选择控件时，会弹出一个原生下拉菜单。现在我已经在此选择上绑定(bind)了 onchange 事件，因此当我选择任何选项时，事件都会被触发，但下拉列表不会淡出，直到我点击完成按钮。

我已经使用 ('select').blur() 来克服它，它在 Android 上运行良好，但在 iOS6 上则不然。

我想用 onchange 淡出下拉菜单。

代码:

<select id="myID" onchange="myFun()">;

function myFun(){
    $('select').blur();
}

or

function myFun(){
    $('#myID').blur();
}

它可能有哪些灵魂？谢谢。

Answer 1

在 iOS 中，您似乎无法在 select 元素上使用 .blur()，该事件将被忽略。

注意:在 iOS 中，用户预计点击“完成”按钮。为什么要通过引入意外交互和行为(=操作系统一开始就没有提供)来迷惑您的最终用户。例如，如果用户选择错误怎么办？他/她将被迫再次点击并再次选择，而不是能够当场纠正......我建议保留默认行为。

更新的示例:I've found this 不是从 DOM 中删除 select 并重新引入它。 .
The below works only in iOS6不过，根据问题。它在 iOS7 中不起作用。

HTML

<div id="mySelectDiv">
    <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>

Selected option: <input type="text" id="selectedOption"/>

JavaScript

function wlCommonInit(){
    $("#mySelect").bind('change', changeValue);
}

function changeValue() {
    var mySelectedIndex = $("#mySelect option:selected").index();

    $("#selectedOption").val($("#mySelect option:selected").text());
    if($("#mySelect").is("select")){
        var fakeSelect = $("#mySelect").clone();
        $("#mySelect").replaceWith(fakeSelect);
        $("#mySelect").bind('change', changeValue);
        $("#mySelect").prop('selectedIndex', mySelectedIndex);
    }
}