Question

JQM 1.3.2 / ASP.NET MVC 4

选择值时，焦点未正确设置到输入字段，我缺少什么？

周围的典型jqm-shadow不会从select中删除，输入会获得阴影效果，但光标不会设置到输入字段中。

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扩展了小提琴：http://jsfiddle.net/tronc/qMjy9/1/

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

Answer 1

使用带有data-native-menu="false"的selectmenu将其转换为弹出窗口并隐藏原生选择菜单。

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

弹出窗口已关闭/隐藏
原生选择菜单已更新
jQM虚拟选择菜单文本已更新
jQM虚拟选择菜单聚焦

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

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

<强> Demo

选择后模糊（）/ focus（）

1 个答案: