HTML与JS键盘导航-优快云博客

本文链接：https://blog.youkuaiyun.com/ccyingfu/article/details/83948078

本文介绍了一个使用HTML和JavaScript实现的简单键盘导航示例。通过键盘的方向键，用户可以在页面内的链接之间进行切换高亮显示。此功能增强了网页的可访问性，并为用户提供了一种便捷的交互方式。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	html,body,div,a{padding:0;margin:0;}
	#d{ width:300px; margin:0 auto; border:1px solid #3366FF}
	#d a{ text-align:center;;width:300px; color:#000000; text-decoration:none; height:24px; line-height:24px; display:block}
	#d a:hover{ background-color:#FF6600}
</style>
<script type="text/javascript">
	function domLocation(node){  
            var left , top , right , bottom;  
            left = top = right = bottom = 0;  
            var n = node;  
            while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };  
            right = left + node.offsetWidth; bottom = top + node.offsetHeight;  
            return {"left":left,"right":right,"top":top,"bottom":bottom,"width":node.offsetWidth,"height":node.offsetHeight}  
    }  


	    function getEvent(){     //同时兼容ie和ff的写法  
             if(document.all)    return window.event;          
             func=getEvent.caller;              
            while(func!=null){      
                 var arg0=func.arguments[0];  
                 if(arg0){  
                     if((arg0.constructor==Event || arg0.constructor ==MouseEvent)  
                         || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){      
                         return arg0;  
                     }  
                 }  
                 func=func.caller;  
            }  
            return null;  
     }  

	var g = function(id){return "string" == typeof id ? document.getElementById(id) : id;},
	    c = function(tagName){return document.createElement(tagName);},
		apc = function(o,po){ (po || document.body).appendChild(o);};


	function isF60(a){
		var bgc = a.currentStyle ? a.currentStyle["backgroundColor"] : window.getComputedStyle(a, null)["backgroundColor"];
		if(bgc.toLowerCase() == "#ff6600" || ("rgb(255,102,0)" == bgc.replace(/\s+/ig,"")))
			return true;
		else 
			return false;
	}
	var cs,idx
	function toggelKey(upDownFlag){
		var f60flag = false;
		for(var i = 0; i < cs.length; i++){

			if(isF60(cs[i])){
				f60flag = true;
				idx = upDownFlag ? i-1 : i+1;
			}
			cs[i].style.backgroundColor = "";
		}
		if((!f60flag || idx == -1) && upDownFlag) idx = cs.length-1;
		else if((!f60flag || idx == cs.length) && !upDownFlag) idx = 0;
		cs[idx].style.backgroundColor = "#ff6600";
	}


	function ku(){
		var e = getEvent();
		if(e.keyCode == 38) toggelKey(true);
		else if(e.keyCode == 40) toggelKey(false);
		else if(e.keyCode == 13) cs[idx].focus();
	}

	window.onload = function(){
		cs = g("d").childNodes
	}

</script>
</head>
<body>
<input type="text" onkeyup="ku()">
<div id="d"><a href="javascript:" onfocus="alert(1)">1111111</a><a href="javascript:" onfocus="alert(2)">2222222</a><a href="javascript:" onfocus="alert(3)">3333333</a><a href="javascript:" onfocus="alert(4)">4444444</a><a href="javascript:" onfocus="alert(5)">5555555</a></div>
</body>
</html>