Tab键控制页面中元素获取焦点顺序


修改默认Tab键按键触发,界面元素获取焦点的顺序
此方法可以用来任意控制一个元素的下一个元素
通过给元素设置tabIndex属性则只能做到先后顺序,而不可以设置下一个获取焦点的元素
例如:
$('loginuser.loginCode').tabIndex = 10;
$('loginuser.password').tabIndex = 20;
$('btnLogin').tabIndex = 30;
这样不能指定btnLogin元素的下一个元素为loginuser.loginCode
主要用于需要固定范围圈的Tab事件处理

var TabOrder = [{id: 'loginuser.loginCode', nextFocus: 'loginuser.password'},
						{id: 'loginuser.password', nextFocus: 'btnLogin'},
						{id: 'btnLogin', nextFocus: 'loginuser.loginCode'}];
		Page.onKeyDown(function(){
			for(var i=0;i<TabOrder.length;i++) {
				$(TabOrder[i].nextFocus).toFocus = event.srcElement.id == TabOrder[i].id && event.keyCode==9;
			}
		});
		Page.onLoad(function(){
			for(var i=0;i<TabOrder.length;i++) {
				(function(orderObj){
					addEvent($(orderObj.id),"blur",function(){
						if($(orderObj.nextFocus).toFocus===true){
							$(orderObj.nextFocus).focus();
						}
					})
				})(TabOrder[i]);
			}
		});

转载于:https://my.oschina.net/darkness/blog/802213

在jQuery,响应`tab`点击事件通常是指当用户按下盘上的`Tab`切换焦点时,希望元素的行为有所变化。不过,`tab`事件并不是直接内置到jQuery库的,因为浏览器原生并没有提供一个叫做`tab`的事件。然而,我们可以模拟或者间接地处理这种行为。这里有一个常见的做法是结合`focusin`和`focusout`事件来跟踪元素的激活状态。 首先,你需要获取到想要监听tab点击的元素,并为其添加`focus`和`blur`事件处理器: ```javascript $(document).on('keydown', function(event) { if (event.keyCode === 9) { // keyCode 9 is for Tab key var $currentFocus = $(':focus'); // 获取当前聚焦元素 // 判断下一个应该获得焦点元素 var nextFocusElement = getNextTabbableElement($currentFocus); if (nextFocusElement.length) { nextFocusElement.focus(); // 给下一个元素聚焦 } } }); // 辅助函数来找到下一个可聚焦的元素 function getNextTabbableElement(element) { var tabbableElements = $(':tabbable'); var index = tabbableElements.index(element) + 1; return tabbableElements.eq(index % tabbableElements.length); // 循环处理,保证索引在合法范围内 } ``` 在这个例子,我们假设所有的可聚焦元素都已经被标记为`:tabbable`,如果没有,你可以自定义这个CSS类或者过滤器来筛选出合适的元素。 注意,这个解决方案并不完美,因为它依赖于用户的盘操作顺序,并且可能无法处理复杂的页面布局情况。如果你需要更精确的控制,建议查阅相关的无障碍规范,例如ARIA和WAI-ARIA指南,或者使用专门的插件如jQuery UI等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值