HTML table标签和其子标签如td,td等不同区域focus然后回车的行为差异

第一版table：

<html>
<body>
<table>
<thead><tr><th>Name</th><th>Value</th></tr>
</thead>
<tr>
<td>This is Jerry's very long name
</td>
<td>1
</td>
</tr><tr>
<td>This is Tom's very long name
</td>
<td>2
</td>
</tr></table>
</body>
</html>

结果：

试了一下，发现td获得不到焦点。网上查了一下，发现csdn这个帖子：说td获取不到焦点。

https://ask.csdn.net/questions/380408

只能手动在Chrome里设置focus，为何？

a标签设置href属性之后，就能正常接收键盘的tab触发的focus事件了：

再做做修改：
加上tr:focus-within：

结果：

需求：有没有可能让tr保持选中状态，但是里面的的蓝色border不出现呢？

这种方式可以：

效果：但是side effect比较大，这样所有的a focus之后都没有效果了：

使用tabindex='0’即可解决问题。

第一次按tab:

第二次按tab：

第三次按tab：

更多Jerry的原创文章，尽在：“汪子熙”:

HTML table标签和其子标签如td,td等不同区域focus然后回车的行为差异相关推荐

SAP Spartacus org unit table不同区域focus然后回车的行为差异
使用tab键首先把focus设置在table row上,点回车: 此时打开的是url: 如果focus的是button: 回车之后会展开该org unit: 更多Jerry的原创文章,尽在:" ...
jquery怎么获取当前标签下的子标签
1.查找子元素方式1:> 例如:var aNods = $("ul > a");查找ul下的所有a标签 2.查找子元素方式2:children() 3.查找子元素方式3 ...
xpath-通过列表推导式和string(.)的方式获取标签下包含子标签的所有文本
如图,需要得到出处文本内容,如果只是"./p[4]/text()"匹配,则会漏掉/a下面的"起坐"和"桃笙": 改为列表推导式和string ...
【Groovy】xml 序列化 ( 使用 MarkupBuilder 生成 xml 数据 | 标签闭包下创建子标签 | 使用 MarkupBuilderHelper 添加 xml 注释 )
文章目录一.标签闭包下创建子标签二.使用 MarkupBuilderHelper 添加 xml 注释三.完整代码示例一.标签闭包下创建子标签在上一篇博客 [Groovy]xml 序列化 ( ...
H5新增的标签以及改良的标签
1>OL标签的改良 start type reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...
java自定义jsp标签_Javaweb自定义jsp标签
自定义标签用户定义的一种自定义的jsp标记,当一个含有自定义标签的jsp页面被jsp引擎编译成Servlet时,tag标签被转化成了对一个称为标签处理类的对象的操作.于是当jsp页面被jsp引擎转化 ...
h5比html新增加的标签,H5新增的标签以及改良的标签
1>ol标签的改良start type reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...
xpath 取标签下所有文字内容_对Xpath 获取子标签下所有文本的方法详解
对Xpath 获取子标签下所有文本的方法详解在爬虫中遇见这种怎么办想提取名称, 但是名称不在一个标签里使用xpath string()方法例如 data.xpath("string ...
UI标签库专题二：JEECG智能开发平台Column(列) 子标签
UI标签库专题二:JEECG智能开发平台Column(列) 子标签 1.1. Column(列) 子标签 1.1.1. 示例 <t:dgCol title="年龄" f ...

HTML table标签和其子标签如td,td等不同区域focus然后回车的行为差异

HTML table标签和其子标签如td,td等不同区域focus然后回车的行为差异相关推荐

最新文章

热门文章