Question

我有一个简单的下拉列表（＆lt; select＆gt;），带有以下标记：＆LT;选择＆GT; ＆lt; option value =“1”＆gt; 1＆lt; / option＆gt; ＆lt; option value =“2”＆gt; 2＆lt; / option＆gt; ＆lt; option value =“3”＆gt; 3＆lt; / option＆gt; ＆lt;！ - ... - ＆gt; ＆lt; option value =“9”＆gt; 9＆lt; / option＆gt; ＆lt; option value =“10”＆gt; 10＆lt; / option＆gt; ＆lt; option value =“11”＆gt; 11＆lt; / option＆gt; ＆lt; option value =“12”＆gt; 12＆lt; / option＆gt; ＆lt; option value =“13”＆gt; 13＆lt; / option＆gt; ＆lt;！ - ... - ＆gt; ＆lt; option value =“21”＆gt; 21＆lt; / option＆gt; ＆lt; option value =“22”＆gt; 22＆lt; / option＆gt; ＆LT; /选择＆GT; 当下拉列表具有焦点并且我输入1,2（首先表示键1和不带逗号的键2）时，选择12。相同的1,3匹配13，依此类推。但是，当键入1,1时，我希望选择11，而不是10。再次按1时，所选值增加1到11，然后增加到12，依此类推。有了这种行为，我也期望有1,2选择2而不是12，不是吗？这是某种默认行为吗？怎么能改变这样1,1，选择11而不是10？正如评论所指出的，这似乎与浏览器有关。 Chrome和Firefox显示所描述的行为，而Internet Explorer和Edge正在选择11,1,1。

Answer 1

我不相信这种行为是specified，因此请由浏览器创建者决定如何实施。

Chrome的默认行为似乎就是您所描述的：

鉴于重复按键（ 1 ， 1 ），浏览器将循环通过以该特定字符开头的选项。
当按键不重复（ 1 ， 2 ）时，浏览器将选择启动的选项使用输入的序列。

即使重复按键，Internet Explorer似乎也支持第二种行为，但在将第一个非匹配元素添加到序列后（ 1 ， 1 11时，kbd>， 1 。

＆＃13;

<select>
  <option>1</option>
  <option>15</option>
  <option>14</option>
  <option>13</option>
  <option>12</option>
  <option>11</option>
  <option>2</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
</select>

＆＃13;

Answer 2

看起来这种行为取决于浏览器以及它们如何实现它（MS很可能希望匹配操作系统行为）。

如果你想要这个确切的行为，无论你的应用程序需要它（不推荐，因为用户可能期望他们已经习惯了某种行为），你可以尝试实现一些这样的JS / jQuery：

var keyIdleTimer = null;
var consecKeys = '';

$('select').keypress(function(e){
    e.preventDefault();

    var key = String.fromCharCode(e.which); //get letter of key

    //check if there's a previous letter pressed
    if (keyIdleTimer) {
        clearTimeout(keyIdleTimer);
    }

    consecKeys += key;

    $(this).val(consecKeys); //select the value

    keyIdleTimer = setTimeout(function(){
        keyIdleTimer = null;
        consecKeys = '';
    }, 500); //time required for a user to hit a second letter
});

在这里小提琴：https://jsfiddle.net/844umqz8/

我刚刚在Chrome中对其进行了测试，并且没有完全使用实际的下拉弹出窗口，但是当该字段处于焦点（没有弹出窗口）时可以正常工作，可能适用于IE。

通过键入选择<select>选项

2 个答案: