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的原创文章,尽在:“汪子熙”:

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页