在 Mobile Safari 中选择 onchange 后，将焦点设置为输入字段

Posted 2023-03-14

【中文标题】在 Mobile Safari 中选择 onchange 后，将焦点设置为输入字段

【英文标题】：Set focus to input field, after select onchange in Mobile Safari

【发布时间】：2014-10-01 18:37:30

【问题描述】：

我一直在考虑为我正在处理的项目创建一个新的数量选择器，并且似乎遇到了在选择 onchange 之后将焦点设置在元素上的问题。

var quantitySelect = document.getElementById('quantitySelect');
var quantityInput = document.getElementById('quantityInput');

quantitySelect.onchange = function () 

    switch (this.value) 

        case '0':
            break;

        case '10':
            quantitySelect.style.display = 'none';
            quantityInput.style.display = 'block';
            quantityInput.value = '';
            quantityInput.focus();
            break;

        default:
            alert('Change quantity to ' + this.value);
            break;

    

;

这个想法是，从 1-9 中选择的任何值都会触发一个新的表单操作并将请求的数量添加到购物篮中。如果选择了 10+ 的值，则会切换一个新的数量输入字段并将焦点应用于该元素。

<select id="quantitySelect">
    <option value="0" selected="">Quantity: 7</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10+</option>
</select>

<input type="tel" value="7" placeholder="Enter Quantity" id="quantityInput" style="display: none;">

在我的测试中，一切似乎都按预期工作，除了 ios 浏览器 - 它无法识别将焦点更改为新数量输入元素的请求。

我已经整理了我当前工作的一个小型 JSFiddle：http://jsfiddle.net/cahamilton/w93qwLk3/

任何帮助/指导将不胜感激！

【参考方案1】：

认为这可能是用户问题，您是否尝试将其关闭再打开？