当前位置:首页 > 前端技术 > div标签别样的属性——tabindex

div标签别样的属性——tabindex

2022年11月09日 23:04:05前端技术10

        今天做开发遇到一个问题,经过努力还是解决了,这次让我认识了div中一个新的属性tabindex,下面结合例子谈一下该属性的作用:

        代码1:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>01</title>
	</head>
	<body>
		<div οnfοcus="javascript:alert('得到焦点!');" style="border:1px solid #ccc;width:200px;height:200px;"> </div>
	</body>
</html>
        说明:当你通过点击div区域试图使div区域获取焦点时,div的onfocus函数并不能触发,这种情况下如果div有onblur事件也是不能触发的;

        代码2:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>02</title>
	</head>
	<body>
		<div tabindex="0" οnfοcus='alert("得到焦点!");' style="border:1px solid #ccc;width:200px;height:200px;"> </div>
	</body>
</html>
        说明:当你通过点击div区域试图使div区域获取焦点时,div的onfocus函数就会触发,这种情况下如果div有onblur事件也可以触发;

        总结:如果试图触发div标签绑定的onfocus事件和onblur事件,需要为该标签添加tabindex属性。

        为什么试图触发div标签绑定的onfocus事件和onblur事件,需要为该标签添加tabindex属性呢?

        代码3:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>03</title>
	</head>
	<body>
		<input type="text" id="text1" id="text1" >   <input type="text" id="text2" id="text2" >
	</body>
</html>
        说明:使用浏览器运行上面代码后,请点击计算机“Tab”键,这是你会发现input控件获取了焦点;input控件可以直接触发onfocus事件和onblur事件,但div不行,这是怎么回事儿呢?呵呵呵,只能有一种情况div标签默认没有tabindex属性——tab键进行移动光标的时候,光标只在具有tabindex属性的元素上进行跳转。
        什么是tabindex,其值代表着什么意思?

        说明:tabindex属性其实指定了点击计算机“Tab”键时光标移动的顺序,在点击计算机“Tab”键时tabindex属性值越(最小为0)其所在的标签越先得到焦点:看下面两个代码:

        代码4:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>04</title>
	</head>
	<body>
		<input type="text" id="text1" id="text1" tabindex = "0">   
		<input type="text" id="text2" id="text2" tabindex = "0">   
		<input type="text" id="text3" id="text3" tabindex = "0">
	</body>
</html>
        说明:在点击计算机“Tab”键时你会看到上面控件获取焦点的顺序依次 自左向右

        代码5:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>05</title>
	</head>
	<body>
		<input type="text" id="text1" id="text1" tabindex = "3">   
		<input type="text" id="text2" id="text2" tabindex = "2">   
		<input type="text" id="text3" id="text3" tabindex = "1">
	</body>
</html>
        说明:在点击计算机“Tab”键时你会看到上面控件获取焦点的顺序依次 自右向左

        总结:通过代码4和代码5我们可以充分的认识到:在点击计算机“Tab”键时tabindex属性值越(最小为0)其所在的标签越先得到焦点。

        使用tabindex注意点

        代码6:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>06</title>
	</head>
	<body>
		<div tabindex="2" style="border:1px solid #ccc;width:200px;height:200px;"> </div>
		<br>
		<div tabindex="1" style="border:1px solid #ccc;width:200px;height:200px;"> </div>
	</body>
</html>

div标签别样的属性——tabindex _ JavaClub全栈架构师技术笔记
图6-1
div标签别样的属性——tabindex _ JavaClub全栈架构师技术笔记

图6-2

        说明:上图中的两个div都添加了tabindex属性,由于第二个div的tabindex属性值比第一个div的tabindex属性值小,所以在点击计算机“Tab”键时第二个div首先获取焦点,可是你留意了吗——获取焦点的div在谷歌浏览器中会出现一个浅蓝色的“框”,在IE浏览器中会出现一个由虚线构成的“框”,这和我们原来的框是不一样的,那么怎么解决这个问题呢?解决出现浅蓝“框”只需要向div标签的样式表中添加“outline:0;”样式即可,解决出现由虚线构成的“框”只需要向div标签中添加“hidefocus="true"”属性和属性值即可;

        代码7:

        

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>07</title>
	</head>
	<body>
		<div tabindex="0" οnfοcus="javascript:alert('得到焦点!');" style="border:1px solid #ccc;width:200px;height:200px;outline:0;"> </div>
	</body>
</html>
        说明:使用IE、火狐或Opera浏览器运行代码7的代码,让div获取焦点(通过鼠标点击div域即可)你会发现出现了一个对话框,点击“确定”按钮,该对话框取消,但是在谷歌或Safari浏览器运行代码7的代码,让div获取焦点(通过鼠标点击div域即可)点击出现的对话框中的“确定”按钮,你会发现该对话框会一次又一次的出现,这不是我们想要看到的,为什么会出现这种情况,怎么解决这种情况呢?呵呵呵,我也正在为此而探索,但到现在也没有找到一个有效的办法,最后迫不得已使用了onclick事件 ,div支持onclick事件的而且不需要添加原本不属于div的tabindex属性。

作者:程序猿老高
来源链接:https://blog.csdn.net/wangshuxuncom/article/details/32328607

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69057.html

标签: HTML
分享给朋友:

“div标签别样的属性——tabindex” 的相关文章

HTML5结构标签

GUIDM在这里祝大家节日快乐! 博主有话说:如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页:GUIDM的主页 内容专栏:HTML5干货系列 此块内容为纯纯的干货,略显乏味枯燥,是笔记向的blog。如果觉得还不错,希...

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

script标签的属性

script标签的属性

共六个,language废弃,charset不常用。 async:异步加载脚本,且不保证加载顺序(下载时不影响页面解析,但解析时会暂停页面渲染) defer:立即下载,延迟执行(遇到</html>标签时执行),有顺序 type:默认type='tex...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

标签添加不可用属性

1. 简单设置a标签的disabled属性就可以阻止事件(onclick)还有href吗? 锚标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href? 首先看一下 关于a标签的oncli...

JSP带有属性的自定义标签

新建HelloWelTag类 如何添加jsp-api.jar包 HelloWelTag类详细代码 package bid.zhazhapan.fims.tag; impo...

HTML隐藏属性的使用

1、disabled。HTML input 标签有一个 disabled 属性,该属性规定是否禁用 input 元素,被禁用的 input 元素既不可用,也不可点击,值为“disabled”。如果要启用该 input 元素,可通过 JavaScript 来删除 disabled...

jq添加标签属性

jquery中可以使用attr()方法为标签添加属性。在jQuery中使用“$(selector).attr(attribute,value)”方法即可设置标签属性。 jquery中可以使用attr()方法为标签添加属性。 1、attr(属性名...

VScode中如何实现标签、组件属性格式化自动换行

VScode中如何实现标签、组件属性格式化自动换行

在一些项目中,我们常看见这样的布局,当标签属性太长时进行换行操作,这又是如何实现的呢 ? 在设置中,其中需要安装js-beautify-html插件 "vetur.format.defaultFormatterOptions": {...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。