Tab键控制光标在指定范围内移动

来源：互联网发布：js给下拉列表赋值编辑：程序博客网时间：2024/05/29 15:39

关于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/

阅读全文

0 0