Javascript 基于值属性使用键盘选择选项 简 二月 破坏 四月 也许 六月 七月 八月 九月 十月 十一月 12月

我有一个月的列表，它们有数值来表示月数。我需要在键盘上输入3，当它聚焦时，我才能被选中

现在我必须键入“m”来选择Mar，或键入任何月份的第一个字母来选择该月份

---

您可以在这里查看fiddle:

从1月到9月的几个月内，以下代码都可以工作，因为它们都需要一次按键

对于其他月份10、11和12，您必须手动选择

$（'select'）。在（'keyup'，函数（e）上{
//这只适用于一月-->九月
//因为Oct-->Dec需要两位数字
$（this.val（parseInt（e.key））；
});

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
据我所知，唯一可靠的方法是使用JavaScript选择菜单替换插件。在选择时捕获按键的技术在某些浏览器上有效，但在其他浏览器上无效（请参阅此处的更多讨论：）。事实上，尽管其他人提到它对他们有效，但艾哈迈德的回答在我的浏览器（Chrome49/OSX10.8）上不起作用

下面是一个示例，说明如何使用修改后的matcher方法执行此操作：


$（'select'）。选择2({
匹配器：函数（参数、数据）{
如果（$.trim（参数术语）=''）{
返回数据；
}else if（data.id.indexOf（params.term）==0）{
//这就是魔法发生的地方
//我们返回搜索输入匹配的选项
//值的开头
返回数据；
}否则{
返回null；
}
}
});
选择{
宽度：100px；
}

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
检查这个，我对艾哈迈德的答案做了一点修改，这也适用于2位数字


var-typingTimer；
var doneTypingInterval=1000；
变量$input=$（'select'）；
var键=“”；
$input.on（'keyup'，函数（e）{
keys+=parseInt（e.key）；
控制台日志（键）；
clearTimeout（键入计时器）；
typingTimer=setTimeout（doneTyping，doneTypingInterval）；
});
//在按下键时，清除倒计时
$input.on（'keydown'，函数（）{
clearTimeout（键入计时器）；
});
//用户正在“完成键入”，请执行某些操作
函数doneTyping（）{
如果（键！=''）{
//做点什么
$input.val（parseInt（keys））；
键=“”；
}
}

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
欢迎来到stackoverflow。你是否考虑过每月这样命名：<代码> 1——JA/<代码>和<代码> 2—FEB < /代码>，等等？我不需要向用户显示月份号。我已经想过了。你必须先选择组合框。点击它或高亮显示它@TeemuI正在使用Chrome，这很好用。我会和IE@teemu核实一下，如果你用两位数字键入数字，它将不起作用（试着键入11）@AlonShmiel我同意。在接受按键组合之前，必须重新编写代码以考虑一些时间延迟。实际上，这在FF（和Edge）中也有效。在FF中，您必须首先用鼠标选择一个月，或者导航到“使用选择”选项卡。在控制台中出现了什么错误？我们可以修复没有错误，它在某些浏览器上根本不起作用。例如，矿山-当选择菜单打开时，
keyup
事件不会被捕获。下面我的答案中有一个链接，里面有很多关于这方面的讨论。我想是浏览器的行为阻止了当选择菜单打开时的按键事件是的-如果你知道将使用什么浏览器，你的答案是好的。例如，如果这是一个由工作人员在受控环境中使用的应用程序，那就好了。我发现它说它是谷歌chrome专用的，请检查
<select>
 <option value="1">Jan</option>
 <option value="2">Feb</option>
 <option value="3">Mar</option>
 <option value="4">Apr</option>
 <option value="5">May</option>
 <option value="6">Jun</option>
 <option value="7">Jul</option>
 <option value="8">Aug</option>
 <option value="9">Sept</option>
 <option value="10">Oct</option>
 <option value="11">Nov</option>
 <option value="12">Dec</option>
</select>