关于javascript实现Tab键控制光标在指定范围内移动
问题的提出: 在IE浏览器中,模态框显示出来后,父画面的操作停止,画面能够操作的部分仅仅是在模态框内部,Tab键移动光标位置也是如此。但是在Chrome与Firefox中,模态框是用一些插件来实现的,例如jQuery EasyUI的Dialog等。实现了模态框的表示,但是与IE的模态框相比稍显不足,仍然可以Tab键操作父页面,达不到跟IE一样的效果,让画面只能操作模态框内部。
以下是我自己找到并补充之后的一段代码,能够实现Tab键控制光标在指定范围内移动,通过捕获Tab键的事件来添加处理,限制光标的移动范围。
这样的话,在插件实现模态框的基础上追加Tab键的控制,可以在模态框表示的情况下,有效的阻止Tab键操作父页面。
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab move within specified range</title>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<title>test</title>
</head>
<form action="#">
<p id="pp">
<input type="text"/>
<input type="button" value="pp"/>
<button>remove P</button>
<select></select>
<a href="#">abc</a>
<a href="#">abc</a>
<a href="#">abc</a>
</p>
<p id="qq">
<button>remove Q</button>
<a href="#">abc</a>
<input type="button" value="pp"/>
<a href="#">abc</a>
<select></select>
<input type="text"/>
<a href="#">abc</a>
</p>
<p id="rr">
<a href="#">abc</a>
<a href="#">abc</a>
<a href="#">abc</a>
</p>
<p>a</p>
<button onclick="remove()">remove p</button>
</form>
<script type="text/javascript">
var tabkeyMove = (function ( createListener, get, next ) {
return function ( id ) {
var listener = createListener( id, get, next );
document.getElementById( id )./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
'keydown', listener, true);
};
})(
function ( tid, get, next ) {
return function (evt) {
var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
var keyCode = evt./*@if( @_jscript ) keyCode @else@*/ which /*@end@*/;
var shift = evt.shiftKey;
var p, c;
if( keyCode == 9 ) {
if( p = get( next( e, shift ), 'id', tid ) ) return;
evt./*@if( @_jscript ) returnValue = false @else@*/ preventDefault() /*@end@*/;
(p = next( e.parentNode, shift )) && p.focus();
}
};
},
function (node, type, val) {
return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null;
},
function ( n, b ) {
var e;
while (n) {
if(!b){
e = n.firstChild || n.nextSibling
if (! e) {
do {
if ((n = n.parentNode) && n.nodeName == 'BODY') return null;
} while (! (e = n.nextSibling))
}
}else{
e = n.lastChild || n.previousSibling
if (! e) {
do {
if ((n = n.parentNode) && n.nodeName == 'BODY') return null;
} while (! (e = n.previousSibling))
}
}
n = e;
if( 'A' == n.nodeName || 'INPUT' == n.nodeName || 'SELECT' == n.nodeName || 'BUTTON' == n.nodeName || 'TEXTAREA' == n.nodeName) return n;
}
return null;
}
);
tabkeyMove('pp');
tabkeyMove('qq');
tabkeyMove('rr');
</script>
</html>
###脚注
参考地址[1]: http://math.stackexchange.com/