Question

我有两个选择字段，国家和城市：

    <select id="country" onchange="getCity(this);">
        <option value="">-- Please select your country --</option>
        <option value="1">Austria</option>
        <option value="2">Switzerland</option>
    </select>
    <select name="city" id="selectFormCity" onchange="setCity(this);">
        <option value="none">-- Please select --</option>
    </select>

选择国家/地区时，将通过Ajax填充城市下拉列表

<script type="text/javascript">
    document.getElementById("country").onchange()
    function getCity(elem) {
        var v = elem.options[elem.selectedIndex].value;

        new Ajax.Request('https://example.com/registration/index/getCity/', {
            parameters: {
                id: v},
            method:'get',
            onSuccess: function(transport) {
                var response = transport.responseText;
                $("selectFormCity").innerHTML(response);
            }
        });
    }
</script>

这在桌面上完美运行。我在Chrome模拟器中测试了各种浏览器和设备。

但是当我在真正的手机上运行时（例如IOS）我在软键盘中面临以下问题：

当我点击国家/地区下拉列表时，移动软键盘会显示，我可以滚动浏览国家/地区。当我没有通过按“完成”按钮关闭键盘但想要使用“箭头”跳转到下一个表格时，城市下拉保持空白（虽然它是通过Ajax更新的）。只要键盘保持打开状态，它就不会填充新数据。

问题

有人知道如何在使用导航箭头时“刷新”第二个下拉列表吗？没有关闭键盘？
或者有人知道如何隐藏用于浏览表单的箭头吗？

非常感谢任何帮助。谢谢！

修改

这似乎是一个常见的问题：

Example 1

Example 2

Answer 1

您可以通过将选择设置为readonly="true"来禁止全部打开键盘。您还可以尝试在onchange()函数中的文档上设置焦点。这应该关闭键盘。

移动软键盘无法通过Ajax填充下拉列表更新（使用箭头时）

1 个答案: