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

Question

我一直在考虑为我正在进行的项目创建一个新的数量选择器，但似乎遇到了在选择 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() 似乎可以解决它。