Tab键控制光标在指定范围内移动
2017-06-26 14:50
344 查看
关于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.par 9314 entNode, 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/相关文章推荐
- js控制光标移动到文本对象的指定位置
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- JavaScript中怎么样在表格控制光标的移动
- Oracle 函数 “数据控制,指定某些人只能查看他权限范围内的信息”
- 通过回车控制光标向下一控件移动
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- vim中多行一起移动指定数目的tab
- 通过回车控制光标向下一控件移动
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- QT项目之键盘控制光标移动
- Selenium模拟光标进入和tab键移动
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- JQUERY实现点击INPUT使光标移动到最后或指定位置
- Vim-复制选中内容至系统剪贴板,光标移动到指定行的行首和行尾
- javascript使回车键替代tab键的光标移动功能
- 页面捕获Enter键实现Tab键移动功能(指定特定的控件)
- C#控制定位Word光标移动到任意行或者最后一行,取得光标位置等操作
- ResultSet光标移动控制
- javascript控制光标移动