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

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

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

1 个答案: