jquery 移动自定义 select 失去对 select 选项的关注

Question

当我点击一个长列表自定义 select 时，会显示一个带有可能选项的新 window，此时我有两个可能的操作：在这种情况下关闭 window它可以很好地返回到之前的 window 而不会失去焦点，但是当我 select 一个选项时，这个 returns 到之前的 window 失去焦点。

在以前的版本 1.0.1 中工作正常。

但在 1.4.5 中没有。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="ui-field-contain">
    <label for="select-custom-20">Long list:</label>
    <select name="select-custom-20" id="select-custom-20" data-native-menu="false">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

jquery手机官网有例子：

1.4.5 不工作 https://demos.jquerymobile.com/1.4.5/selectmenu-custom/

1.0.1 工作正常！！ https://demos.jquerymobile.com/1.0.1/docs/forms/selects/custom.html

关于如何在 1.4.5 版中更正此问题的任何建议？

Answer 1

当您在 custom-select 中放入一个很长的项目列表时，JQM 将使用 data-role = "dialog" 创建一个新页面。如果没有页面转换，焦点会及时恢复，但如果您希望 custom-select 对话框也显示平滑的页面转换，则需要增加该按钮焦点的延迟。

您可以猴子修补 JQM 并检查 dialog-page 和转换。

这是一个例子：

$(document).on('mobileinit', function () {
    $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
        _focusButton : function() {
            var self = this;
            if(self.menuType == "page" && $.mobile.defaultDialogTransition != "none") {
                setTimeout( function() {
                    self.button.focus(); 
                }, 200); // increased delay
            } else {
                setTimeout( function() {
                    self.button.focus(); 
                }, 40); // default delay
            }
        }
    });     
});

为了完整起见，请注意，如果您设置了 hashListeningEnabled = false，则此问题不会引起注意，因为所有链接都在内部处理，不会有任何 window.history 操作。

jquery 移动自定义 select 失去对 select 选项的关注

jquery mobile custom select lose focus on select option

jquery-mobile