accesskey是XHTML定义的快捷键属性, 适用于a, input等元素. 例如下面代码
<a href="...." title="" accesskey="z" >...</a>
则用户使用键盘快捷键ALT+z可以直接打开这个链接. 不同浏览器的前置键不同, IE为Alt, Opera为 shift+ESC, Firefox为alt+shift. 如果accesskey属性位于input/ label等元素里, 点击快捷键时对应输入框获得焦点.
本文的内容是, 对一个已经定义accesskey的a (或其他)元素, 在其title属性里增加快捷键提示, 这样鼠标悬停时会显示对应的快捷键. 类似维基百科顶部和左侧导航栏里鼠标悬停链接时的效果, 使用Javascript实现.代码参考了Mediawiki
代码中用到了jQuery
代码:
把上面代码保存为一个js文件, 然后在页面底部里导入这个js文件
<script src="...." type="text/javascript"></script>
<a href="...." title="" accesskey="z" >...</a>
则用户使用键盘快捷键ALT+z可以直接打开这个链接. 不同浏览器的前置键不同, IE为Alt, Opera为 shift+ESC, Firefox为alt+shift. 如果accesskey属性位于input/ label等元素里, 点击快捷键时对应输入框获得焦点.
本文的内容是, 对一个已经定义accesskey的a (或其他)元素, 在其title属性里增加快捷键提示, 这样鼠标悬停时会显示对应的快捷键. 类似维基百科顶部和左侧导航栏里鼠标悬停链接时的效果, 使用Javascript实现.代码参考了Mediawiki
代码中用到了jQuery
代码:
var ua = navigator.userAgent.toLowerCase();
var is_win = ( ua.indexOf('windows') != -1 );
var webkit_match = ua.match(/applewebkit\/(\d+)/);
if (webkit_match)
var webkit_version = parseInt(webkit_match[1]);
var tooltipAccessKeyPrefix = 'alt-';
if( jQuery.browser.opera )
tooltipAccessKeyPrefix = 'shift-esc-';
else if( !is_win && typeof(webkit_version) != "undefined" && webkit_version > 526 && jQuery.browser.safari )
tooltipAccessKeyPrefix = 'ctrl-alt-';
else if( !is_win && ( jQuery.browser.safari || ua.indexOf('mac') != -1 || ua.indexOf('konqueror') != -1 ) )
tooltipAccessKeyPrefix = 'ctrl-';
else if( jQuery.browser.mozilla )
tooltipAccessKeyPrefix = 'alt-shift-';
jQuery("a, input").each(function(i) {
if( this.getAttribute("accesskey") != null && this.getAttribute("accesskey") != "" ) {
var title = "";
if( this.getAttribute("title") != null && this.getAttribute("title") != "" )
title = this.getAttribute("title") + " ";
this.setAttribute("title", title + "[" + tooltipAccessKeyPrefix + this.getAttribute("accesskey") + "]");
}
});把上面代码保存为一个js文件, 然后在页面底部里导入这个js文件
<script src="...." type="text/javascript"></script>
Continue reading 实现Mediawiki样式的Accesskey快捷键鼠标提示.
Recent Comments