在移動 Safari 中的 select onchange 之后將焦點設置為輸入字段

Question

我一直在考慮為我正在處理的項目創建一個新的數量選擇器，並且似乎遇到了在 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 瀏覽器 - 它無法識別將焦點更改為新數量輸入元素的請求。

我已經整理了我當前工作的一個小 JSFiddle： http://jsfiddle.net/cahamilton/w93qwLk3/

任何幫助/方向將不勝感激！

Answer 1

我遇到了與 IOS 類似的問題，添加e.preventDefault()似乎可以解決它。

Answer 2

認為這可能是用戶問題，您是否嘗試過將其關閉然后再次打開？