教程集 > 脚本编程 > javascript > 正文 js 下拉列表快速选择(可用快捷键字母)

js 下拉列表快速选择(可用快捷键字母)

发布时间：2017-06-05 编辑：jiaochengji.com

教程集为您提供js 下拉列表快速选择(可用快捷键字母)等资源，欢迎您收藏本站，我们将为您提供最新的js 下拉列表快速选择(可用快捷键字母)资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉列表快速选择</title><script type="text/javascript" language="JavaScript">// 获取拼音首字母function getPinYin(c) { execScript("tmp=asc("" c "")", "vbscript"); tmp = 65536 tmp; if(tmp>=45217 && tmp<=45252) return "A"; if(tmp>=45253 && tmp<=45760) return "B"; if(tmp>=45761 && tmp<=46317) return "C"; if(tmp>=46318 && tmp<=46825) return "D"; if(tmp>=46826 && tmp<=47009) return "E"; if(tmp>=47010 && tmp<=47296) return "F"; if((tmp>=47297 && tmp<=47613) || (tmp == 63193)) return "G"; if(tmp>=47614 && tmp<=48118) return "H"; if(tmp>=48119 && tmp<=49061) return "J"; if(tmp>=49062 && tmp<=49323) return "K"; if(tmp>=49324 && tmp<=49895) return "L"; if(tmp>=49896 && tmp<=50370) return "M"; if(tmp>=50371 && tmp<=50613) return "N"; if(tmp>=50614 && tmp<=50621) return "O"; if(tmp>=50622 && tmp<=50905) return "P"; if(tmp>=50906 && tmp<=51386) return "Q"; if(tmp>=51387 && tmp<=51445) return "R"; if(tmp>=51446 && tmp<=52217) return "S"; if(tmp>=52218 && tmp<=52697) return "T"; if(tmp>=52698 && tmp<=52979) return "W"; if(tmp>=52980 && tmp<=53688) return "X"; if(tmp>=53689 && tmp<=54480) return "Y"; if(tmp>=54481 && tmp<=62289) return "Z"; return c.charAt(0);} // select helperSelectHelper = new function() { // 初始化 this.init = function() { document.attachEvent("onkeypress", function() { var elm = event.srcElement; if (elm.tagName == "SELECT" && elm.className.indexOf("SelectHelper") == -1) { elm.className = "SelectHelper"; elm.attachEvent("onkeypress", SelectHelper.getNextKeyItem); elm.fireEvent("onkeypress", event); } }); } // 获取选项文本的首字符 function getItemKeyChar(option) { return option.text.charAt(0).toUpperCase(); } // 查找并选中匹配的选项 this.getNextKeyItem = function() { var elm = event.srcElement; var index = elm.selectedIndex 1; do { if (index == elm.length) index = 0; if (index == elm.selectedIndex) return false; // 未找到匹配的选项，则退出 } while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index ]))); elm.selectedIndex = index - 1; // 选中匹配的选项 return false; // 取消原有的选择功能 }};/** * 返回键盘事件对应的字母或数字 * a-z: 97 -> 122 * A-Z: 65 -> 90 * 0-9: 48 -> 57 */function key2Char(key) { var s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; if (key >= 97 && key <= 122) return s.charAt(key - 97); if (key >= 65 && key <= 90) return s.charAt(key - 65); if (key >= 48 && key <= 57) return "" (key - 48); return null;}SelectHelper.init();</script></head><body>比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。 <select><option selected value=北京>北京</option><option value=上海>上海</option><option value=天津>天津</option><option value=重庆>重庆</option><option value=河北>河北</option><option value=山西>山西</option><option value=内蒙古>内蒙古</option><option value=辽宁>辽宁</option><option value=32>32</option><option value=吉林>吉林</option><option value=黑龙江>黑龙江</option><option value=江苏>江苏</option><option value=浙江>浙江</option><option value=%&>&^</option><option value=安徽>安徽</option><option value=福建>福建</option><option value=北京>A1</option><option value=江西>江西</option><option value=山东>山东</option><option value=河南>河南</option><option value=湖北>湖北</option><option value=湖南>湖南</option><option value=31>31</option><option value=广东>广东</option><option value=广西>广西</option><option value=海南>海南</option><option value=北京>A2</option><option value=四川>四川</option><option value=贵州>贵州</option><option value=云南>云南</option><option value=西藏>西藏</option><option value=陕西>陕西</option><option value=甘肃>甘肃</option><option value=宁夏>宁夏</option><option value=青海>青海</option><option value=新疆>新疆</option><option value=香港>香港</option><option value=澳门>澳门</option><option value=台湾>台湾</option><option value=其它>其它</option></select><select><option selected value=北京>北京</option><option value=上海>上海</option><option value=天津>天津</option><option value=重庆>重庆</option><option value=河北>河北</option><option value=山西>山西</option><option value=内蒙古>内蒙古</option><option value=辽宁>辽宁</option><option value=32>32</option><option value=吉林>吉林</option><option value=黑龙江>黑龙江</option><option value=江苏>江苏</option><option value=浙江>浙江</option><option value=%&>&^</option><option value=安徽>安徽</option><option value=福建>福建</option><option value=北京>A1</option><option value=江西>江西</option><option value=山东>山东</option><option value=河南>河南</option><option value=湖北>湖北</option><option value=湖南>湖南</option><option value=31>31</option><option value=广东>广东</option><option value=广西>广西</option><option value=海南>海南</option><option value=北京>A2</option><option value=四川>四川</option><option value=贵州>贵州</option><option value=云南>云南</option><option value=西藏>西藏</option><option value=陕西>陕西</option><option value=甘肃>甘肃</option><option value=宁夏>宁夏</option><option value=青海>青海</option><option value=新疆>新疆</option><option value=香港>香港</option><option value=澳门>澳门</option><option value=台湾>台湾</option><option value=其它>其它</option></select></body></html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
电脑键盘快捷键大全有那些?盘快捷键使用大全
 js 下拉列表快速选择(可用快捷键字母)
photoshop快速选择工具选用技巧分享
 Photoshop在win10中画笔大小快捷键失效解决方法
 Illustrator快速制作出斜面浮雕效果的小图标教程
 360极速浏览器截图功能在哪？360极速浏览器截图快捷键是什么？
visual studio 2013快捷键 vs2013常用快捷键大全
 ASP.NET控件利用Control.ContextMenu加入快捷菜单
 sublime如何写python
photoshop三招快速制作聊天动态文字教程分享

上一篇：js控制textarea输入框根据内容自动适应高度下一篇：js 简单实用的点击可显隐层效果

[关闭]

js 下拉列表快速选择(可用快捷键字母)

最近更新

浏览排行