问题的提出： 在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=".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 );ElementById( 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.nextSiblingif (! e) {do {if ((n = n.parentNode) && n.nodeName == 'BODY') return null;} while (! (e = n.nextSibling))}}else{e = n.lastChild || n.previousSiblingif (! 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]: /
本文发布于:2024-02-04 14:44:22，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170709616256485.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
