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

我一直在考虑为我正在处理的项目创建一个新的数量选择器，似乎在select 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浏览器之外，所有的东西都像预期的那样工作。iOS浏览器无法识别将焦点更改为新的quantity输入元素的请求

<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;">

我总结了我目前工作的一小部分：

---

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

如果你认为这可能是用户的问题，你是否尝试过反复关闭它