jquery mobile custom select失去对选择选项的关注

Question

当我单击一个长列表自定义选择一个新窗口时显示可能的选项，此时我有两个可能的操作：关闭窗口在这种情况下它可以正常工作返回到前一个窗口而不会失去焦点但是当我选择一个选项，这将返回到失去焦点的上一个窗口。

在以前的版本中，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 mobile官网上有例子：

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 操作。