選擇<select>選項通過用以下標記鍵入

我有一個簡單的下拉（<select>）：選擇<select>選項通過用以下標記鍵入

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <!-- ... --> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    <option value="11">11</option> 
    <option value="12">12</option> 
    <option value="13">13</option> 
    <!-- ... --> 
    <option value="21">21</option> 
    <option value="22">22</option> 
</select>

當下拉具有焦點和I型，（意味着鍵1第一和鍵2沒有逗號），12被選中。相同,匹配13等等。

然而，打字，當我希望11來選擇，而是10是。

再次按時，所選值將增加1至11，然後至12等等。有了這種行爲，我也希望有,選擇2而不是12，不？

這是某種默認行爲嗎？這怎麼可以改變如此,選擇11而不是10？

正如評論指出的，這似乎與瀏覽器有關。 Chrome和Firefox顯示所描述的行爲，而Internet Explorer和Edge正在選擇11，其中，。

來源

2016-04-12 KingKerosin

可能是默認的瀏覽器行爲，您使用的是哪種瀏覽器？ IE瀏覽器？增加1行爲，可能是由於從1開始的所有事件的循環。因此，如果你拿出13例如，當按下1時它可能會走10,11,12,14 ......如果它只是一個瀏覽器問題，我可以看到放入一些多餘的JS代碼來創建你想要的行爲。 – Akurn

但是在輸入'1-2'時不會選擇'20'或'2'嗎？ – KingKerosin

似乎'IE'和'Edge'正在做我期望的事情。「Chrome」代替了所描述的行爲。將檢查'firefox'在做什麼 – KingKerosin

我不認爲這個行爲是specified，所以由瀏覽器創建者決定如何實現它。

Chrome瀏覽器的默認行爲似乎是你的描述：

給出一個重複按鍵（，），通過與啓動選項，瀏覽器將週期特定的字符。
當按鍵不重複（，），瀏覽器會選擇與輸入的序列啓動選項。

Internet Explorer中似乎有利於第二行爲即使有重複按鍵，但第一個不匹配的元素添加到序列（後會回落到騎自行車，，當最後的比賽是11）。

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

來源

2016-04-12 12:19:22 CodeCaster

貌似這種行爲是依賴於瀏覽器，他們已經如何實現它（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瀏覽器。

來源

2016-04-12 13:05:05 Akurn

不錯的方法，但是當用戶輸入一個不在選項列表中的序列時（如'A'，或'1'，'1'，'1'），這會中斷。你可以通過檢查'consecKeys'是否作爲非禁用元素存在於選項中來解決這個問題，如果是，請調用'e.preventDefault（）'。否則，讓瀏覽器處理事件。 – CodeCaster

你說得對。我在這裏做了一個修改：https：//jsfiddle.net/844umqz8/1/，但是我仍然認爲原始版本演示了邏輯清理器，它不應該「按原樣」使用，但更多的是，被採用到更適合應用程序的地方 – Akurn

選擇<select>選項通過用以下標記鍵入

回答

相關問題