奇怪的按鍵問題與html選擇

我們有一個下拉列表（html選擇），其中包含數字從00到59（可能的分鐘數值）。當使用鍵盤控制聚焦和用戶輸入13（或24或59等）時，它選擇控制中的數字13（或24或59等）。這是預期的行爲。奇怪的按鍵問題與html選擇

但是，當用戶輸入數字如44，它選擇40然後41。同樣是22,33,55的問題。

這是Firefox，Chrome，Safari的行爲。有趣的是，在IE9中它工作正常（你輸入44它選擇44）

請建議如何使「html select」的行爲在所有瀏覽器中統一。最好的方式是在IE9中工作，這似乎是正確的。

示例代碼：

<html> 
<body> 
Select Minutes: 
    <select id="hr_sel_min"> 
     <option title="00" value="00" selected="selected">00</option> 
     <option title="01" value="01">01</option> 
     <option title="02" value="02">02</option> 
     <option title="03" value="03">03</option> 
     <option title="04" value="04">04</option> 
     <option title="05" value="05">05</option> 
     <option title="06" value="06">06</option> 
     <option title="07" value="07">07</option> 
     <option title="08" value="08">08</option> 
     <option title="09" value="09">09</option> 
     <option title="10" value="10">10</option> 
     <option title="11" value="11">11</option> 
     <option title="12" value="12">12</option> 
     <option title="13" value="13">13</option> 
     <option title="14" value="14">14</option> 
     <option title="15" value="15">15</option> 
     <option title="16" value="16">16</option> 
     <option title="17" value="17">17</option> 
     <option title="18" value="18">18</option> 
     <option title="19" value="19">19</option> 
     <option title="20" value="20">20</option> 
     <option title="21" value="21">21</option> 
     <option title="22" value="22">22</option> 
     <option title="23" value="23">23</option> 
     <option title="24" value="24">24</option> 
     <option title="25" value="25">25</option> 
     <option title="26" value="26">26</option> 
     <option title="27" value="27">27</option> 
     <option title="28" value="28">28</option> 
     <option title="29" value="29">29</option> 
     <option title="30" value="30">30</option> 
     <option title="31" value="31">31</option> 
     <option title="32" value="32">32</option> 
     <option title="33" value="33">33</option> 
     <option title="34" value="34">34</option> 
     <option title="35" value="35">35</option> 
     <option title="36" value="36">36</option> 
     <option title="37" value="37">37</option> 
     <option title="38" value="38">38</option> 
     <option title="39" value="39">39</option> 
     <option title="40" value="40">40</option> 
     <option title="41" value="41">41</option> 
     <option title="42" value="42">42</option> 
     <option title="43" value="43">43</option> 
     <option title="44" value="44">44</option> 
     <option title="45" value="45">45</option> 
     <option title="46" value="46">46</option> 
     <option title="47" value="47">47</option> 
     <option title="48" value="48">48</option> 
     <option title="49" value="49">49</option> 
     <option title="50" value="50">50</option> 
     <option title="51" value="51">51</option> 
     <option title="52" value="52">52</option> 
     <option title="53" value="53">53</option> 
     <option title="54" value="54">54</option> 
     <option title="55" value="55">55</option> 
     <option title="56" value="56">56</option> 
     <option title="57" value="57">57</option> 
     <option title="58" value="58">58</option> 
     <option title="59" value="59">59</option> 
    </select> &nbsp;minutes 
</body> 

</html>

請找到的jsfiddle示例代碼：http://jsfiddle.net/2QTvJ/

（打開IE9和Chrome的例子中看出區別）

來源

2013-04-10 Falaque

的行爲是與瀏覽器相關的，更復雜的是，在所描述的問題。例如，在Firefox上，如果你輸入13足夠快，選擇13;比較慢，前10個被選中，然後是30.這樣的控制是一個可用性惡夢（大多數用戶不知道他們可以輸入選擇框），所以使用雙字符文本輸入框更好。 – 2013-04-10 06:22:25

我們打算保持原樣，說它的瀏覽器相關，並且它不會產生巨大的差異。但是我還想知道其他人如何處理這個問題？ – Falaque 2013-04-10 06:31:12

這不是一個問題，這是瀏覽器的工作原理。如果按5並等待並再次按5，則需要從50到51,52,53等。所以它應該如何工作。 – 2013-04-10 08:07:28

由於Raheel說的話，例如，它會上升到下一個值，以你命中的角色開始，例如4或5。您可以有一個文本框輸入，然後更改下拉值或其他類型的表單元素，以區分該值。

另一種方法是區分價值與jquery按鍵功能。

http://api.jquery.com/keypress/

來源

2013-04-10 08:39:32 Ezos

奇怪的按鍵問題與html選擇

回答

相關問題