javascript - 选择后模糊()/焦点()

Question

JQM 1.3.2/ASP.NET MVC 4

当选择一个值时，焦点没有正确设置到输入字段，我错过了什么？

周围的典型 jqm-shadow 没有从选择中移除，输入得到阴影效果，但光标没有设置到输入字段中。

JavaScript:

$('#IndexScanPage').on('change', '#locationCode', function (e) {
    $('#locationCode').blur();
    $('#_inputEAN').focus();
});

部分html代码:

<div id="IndexScanPage">
    <select name="locationCode" id="locationCode" data-native-menu="false" data-icon="home">
        <option value='' data-placeholder="true">Lagerauswahl</option>
        @{
            foreach ( var location in Model.Locations)
            {
                <option value='@location.LocationCode'>@location.LocationDescription</option> 
            }
        }
    </select>

    <div class="ui-grid-solo">
        <div class="ui-block-a">
            <input id="_inputEAN" name="barcode" data-clear-btn="true" autocomplete="off" autofocus required />
            <div class="spacer"></div>
            <input type="submit" name="submitButton" id="submitButton" value="Weiter" data-role="button" data-iconpos="right" data-icon="search" />
        </div>
    </div>
</div>

编辑:

扩展了来自@Omar 的 fiddle :http://jsfiddle.net/tronc/qMjy9/1/

点击额外按钮正确聚焦输入，为什么脚本代码不起作用？

Answer 1

将 selectmenu 与 data-native-menu="false" 一起使用会将其转换为弹出窗口并隐藏 native selectmenu。

当您选择一个选项时，它会经历几个阶段。

• 弹出窗口关闭/隐藏
• native 选择菜单已更新
• jQM 虚拟选择菜单文本已更新
• jQM 虚拟选择菜单获得焦点

因此，您需要等到上述所有步骤都完成。

$("#IndexScanPage").on('change', '#locationCode', function (e) {
  setTimeout(function () {
    $('#_inputEAN').focus();
  }, 50); // minimum value - tested on Chrome
});

Demo