`

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]);
			}
		});
分享到:
评论

相关推荐

    [QT]实现Tab键切换控件的两种方式及禁止Tab切换的简单方法

    在QT编程中,用户界面(UI)的交互性是至关重要的,Tab键的使用就是提升用户体验的一个关键元素。Tab键可以方便用户在不同控件之间快速切换,无需使用鼠标。本篇文章将深入探讨如何实现Tab键切换控件的两种方式以及...

    回车键tabindex 获取焦点 enter

    在实际应用中,我们可能会遇到这样的需求:用户按下Enter键时,希望某个特定元素获取焦点。这可以通过监听键盘事件并判断按键码来实现。例如,当`event.keyCode`等于13(代表Enter键)时,调用`element.focus()`方法...

    Vue中实现回车键切换焦点的方法

    根据元素在页面中的顺序,我们可以用activeEl.nextElementSibling来获取下一个兄弟元素,这通常是下一个输入框。 最后一步是切换焦点,这可以通过调用下一个元素的focus方法来完成。简单来说,就是让下一个元素获得...

    网页防止tab键的使用快速解决方法

    当检测到Tab键被按下(keyCode等于9)时,它会将焦点重新设置到页面的body元素上,这样就可以避免背景页面的元素获取焦点。 然而,这种方法可能还不够完善。为了确保弹出层出现时焦点正确地锁定在弹出层内,我们...

    js实现键盘选择html元素

    3. **处理键盘事件**:在事件处理函数中,使用`event.keyCode`或`event.key`来获取按下键的ASCII码或键名。根据这些信息,你可以判断用户按下的是哪个键,并决定焦点应移到哪个元素。 4. **移动焦点**:使用`...

    jquery按键渐变显示tab标签

    比如,确保所有的Tab都有清晰的焦点状态,并且键盘顺序逻辑清晰。 以上是实现"jQuery按键渐变显示tab标签"所需的主要技术点。实际开发中,我们还需要考虑代码的可维护性和性能优化,例如使用模块化开发,避免不必要...

    CSS3设计导航案例.pdf

    本篇主要讨论两个关键知识点:Tabindex属性和nav-index属性,以及它们在调整表单域键盘焦点顺序中的应用。 首先,让我们深入了解Tabindex属性。Tabindex属性是HTML中的一个属性,用于控制元素获取键盘焦点的顺序。...

    AOM中IE、Firefox兼容Enter代替Tab的Javascript

    在这个示例中,我们首先定义了一个`handleTabNavigation`函数,它会找到当前焦点元素在所有可聚焦元素中的索引,并计算下一个应该获取焦点的元素。`preventDefault()`方法阻止了默认的回车行为,然后我们将焦点转移...

    使用JS取得焦点(focus)元素代码

    值得注意的是,`tabIndex`属性允许开发者指定元素的tab键顺序,从而也可以通过程序代码来控制焦点。 例如,假设用户打开了一个模态窗口,并且在窗口打开之前保存了触发该模态窗口打开的元素引用。当模态窗口打开时...

    表单切换,用回车键替换Tab健(不支持IE)

    在网页设计中,表单是收集用户数据的重要组成部分。通常,用户通过按Tab键在表单元素之间进行切换...同时,也可以考虑使用原生HTML5的`tabindex`属性来控制焦点顺序,因为这个属性在大多数现代浏览器中都有良好的支持。

    Use the Enter Key Like a Tab

    描述部分没有提供额外的信息,但我们可以根据标题推测,这可能涉及到编写代码或设置,使用户在按下回车键时,焦点能够按照预设顺序在表单的各个控件间移动,就像使用Tab键一样。 标签“另类其它 控件 源码 资源”...

    DOMTab-通过CSS和DOMscripting进行tab标签栏切换效果.zip

    同时,为了确保良好的可访问性,我们需要处理键盘导航,例如使用`tabIndex`属性设置元素的焦点顺序,并响应`keydown`事件来支持使用箭头键切换Tab。 此外,为了实现无缝的用户体验,我们需要确保在页面加载时正确...

    网页设计 TabIndex元素

    在网页设计中,`TabIndex` 是一个非常关键的属性,它用于定义用户使用键盘Tab键在页面元素间切换焦点的顺序。默认情况下,浏览器会按照元素在HTML文档中出现的顺序来分配Tab键的焦点流转。然而,通过设置`TabIndex`...

    键盘操作select下拉框

    在网页开发中,`select`元素是用于创建下拉列表的一种常见方式,它允许用户从一组预定义的选项中进行选择。在某些情况下,特别是对于无障碍功能或提高操作效率而言,能够通过键盘来操作`select`下拉框是非常重要的。...

    详细总结Javascript中的焦点管理

    `tabIndex`属性控制元素在Tab遍历中的顺序。`tabindex=-1`的元素不会被Tab键遍历,`tabindex=0`的元素按顺序遍历,而`tabindex`大于0的元素则按照数值大小决定遍历顺序,值越大,优先级越低。 3. `focus()`方法:此...

    表单的焦点顺序tabindex和对应enter键提交

    首先,表单的焦点顺序指的是用户在使用键盘的`Tab`键在表单元素间切换时,焦点移动的顺序。默认情况下,表单元素的焦点顺序按照它们在HTML代码中的出现顺序来决定。然而,开发者可以通过设置`tabindex`属性来自定义...

    TaskOne.rar_Table

    在网页或应用程序中,Tab键用于在可聚焦元素之间切换焦点,如按钮、输入框、链接等。这使得用户可以通过键盘而非鼠标来导航,对于无障碍访问和提高操作效率具有重要意义。而在默认情况下,表格的焦点转换也是通过Tab...

    C语言.NET技术02.pdf

    默认情况下,Tab键序按照控件在窗体中添加的顺序进行。可以通过调整控件的TabIndex属性来改变这个顺序。TabIndex属性是一个整数值,决定控件接收焦点的优先级。TabStop属性则用于决定控件是否能接收焦点,设为False...

Global site tag (gtag.js) - Google Analytics