Wybierając opcje <wybierz>, wpisując - html, menu rozwijane

Mam proste menu rozwijane (<select>) z następującym znacznikiem:

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

Gdy lista rozwijana ma fokus i wpisuję 1, 2 (co oznacza klucz 1 pierwszy i klucz 2 bez przecinka), 12 jest zaznaczone. To samo dotyczy 1, 3 pasujący 13 i tak dalej.

Jednak podczas pisania 1, 1 oczekiwałbym 11 do wyboru, ale zamiast tego 10 jest.

Po naciśnięciu 1 ponownie, wybrana wartość wzrasta o 1 do 11, następnie do 12 i tak dalej. Z takim zachowaniem oczekiwałbym również posiadania 1, 2 Wybierz 2 zamiast 12, nie?

Czy to jakieś domyślne zachowanie? Jak można to zmienić 1, 1 wybiera 11 zamiast 10?

Jak zauważyły ​​komentarze, wydaje się, że jest to związane z przeglądarką. Chrome i Firefox pokazują opisane zachowanie, podczas gdy Internet Explorer i Edge wybierają 11 na 1, 1.

Odpowiedzi:

Nie wierzę, że to zachowanie jest określony, więc od twórcy przeglądarki zależy, jak ją wdrożyć.

Domyślne zachowanie Chrome wydaje się być tym, co opisujesz:

1. Dawać powtarzający się naciśnięcie klawisza (1, 1), przeglądarka będzie cykl poprzez opcje, które zaczynają się od tej konkretnej postaci.

2. Po naciśnięciu klawiszy don "t powtórz (1, 2), przeglądarka wybierze opcję, która zaczyna się od wprowadzonego sekwencja.

Internet Explorer wydaje się faworyzować drugie zachowanie, nawet przy powtarzających się naciśnięciach klawiszy, ale wróci do cyklu po dodaniu pierwszego niepasującego elementu do sekwencji (1, 1, 1 kiedy ostatni mecz jest 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>

Wygląda na to, że to zachowanie zależy od przeglądarki i sposobu jej wdrożenia (MS najprawdopodobniej chce dopasować zachowanie systemów operacyjnych).

Jeśli chcesz tego dokładnego zachowania dla czegokolwiekTwoja aplikacja tego potrzebuje (niezalecane, ponieważ użytkownicy prawdopodobnie spodziewają się pewnego zachowania, do którego są przyzwyczajeni), możesz spróbować zaimplementować niektóre JS / jQuery w ten sposób:

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
});

Fiddle tutaj: https://jsfiddle.net/844umqz8/

Właśnie przetestowałem go w Chrome i nie działa poprawnie z rozwijanym wyskakującym okienkiem, ale działa, gdy pole jest w centrum uwagi (bez wyskakującego okienka), może działać na IE.