当前位置: 代码迷 >> Web前端 >> Tab键统制页面中元素获取焦点顺序
  详细解决方案

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

热度:83   发布时间:2012-11-10 10:48:51.0
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]);
			}
		});
  相关解决方案