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

最新推荐文章于 2024-04-18 17:52:13 发布

chen510103032

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量3.4k

点赞数

分类专栏： javascript web前端文章标签： javascript firefox chrome web前端

本文链接：https://blog.csdn.net/chen510103032/article/details/73739977

版权

web前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

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

chen510103032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tab键控制光标在指定范围内移动

关于javascript实现Tab键控制光标在指定范围内移动问题的提出：在IE浏览器中，模态框显示出来后，父画面的操作停止，画面能够操作的部分仅仅是在模态框内部，Tab键移动光标位置也是如此。但是在Chrome与Firefox中，模态框是用一些插件来实现的，例如jQuery EasyUI的Dialog等。实现了模态框的表示，但是与IE的模态框相比稍显不足，仍然可以Tab键操作父页面，达不到跟IE
复制链接

扫一扫