网页中快捷键的处理办法

素颜马尾好姑娘i 2022-04-11 13:39 277阅读 0赞

快捷键的使用：  
两种解决办法：JS 、html  
1）html标签属性 accesskey  参考：http://www.fzyr.cn/post-654.html  
accesskey 属性规定激活（使元素获得焦点）元素的快捷键。  
注意： 在不同操作系统中不同的浏览器中访问快捷键的方式不同：  
  
提示： 各种浏览器下accesskey快捷键的使用方法：  
IE浏览器  
按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车.  
FireFox浏览器  
按住Alt+Shift键，点击accesskey定义的快捷键.  
Chrome浏览器  
按住Alt键，点击accesskey定义的快捷键.  
Opera浏览器  
按住Shift键，点击esc，出现本页定义的accesskey快捷键列表可供选择.  
Safari浏览器  
按住Alt键，点击accesskey定义的快捷键.  
  
HTML 4.01 与 HTML5之间的差异  
  
在 HTML5 中, accesskey 属性可用于任何 HTML 元素 (它会 验证任何HTML元素。但不一定是有用)。  
在 HTML 4.01 中, accesskey 属性可使用于: <a>, <area>, <button>, <input>, <label>, <legend>, 和 <textarea>。  
语法  
  
<element accesskey="character">  
属性值  
  
值 描述  
character 指定激活元素的快捷键  
实例  
带有指定快捷键的超链接：  
<a href="http://www.w3cschool.cc/html5" accesskey="h">HTML5</a><br>  
<a href="http://www.w3cschool.cc/css3" accesskey="c">CSS3</a>  
  
浏览器支持  
  
Internet ExplorerFirefoxOperaGoogle ChromeSafari  
所有主流浏览器都支持 accesskey 属性  
  
2)js  
引入mousetrap.js插件  
使用如下：（封装）  
/\*\*  
 \* \[hot\_Keys description\]  
 \* @param  \{\[type\]\} obj     触发事件的对象  
 \* @param  \{\[type\]\} fastKey 快键键的设置：如'alt+s'  
 \* @return \{\[type\]\}         \[description\]  
 \*/  
function hot\_Keys(obj,fastKey)\{   
     Mousetrap.bind(fastKey, function(e) \{   
        obj.trigger("click");  
        return false;//禁止浏览器的事件  
     \});  
\}  
  
  
eg：hot\_Keys(bSave,'alt+s');