HTML table标签和其子标签如td,td等不同区域focus然后回车的行为差异
生活随笔
收集整理的這篇文章主要介紹了
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 un
- 下一篇： 聊聊拍照那些事：五一外出你更喜欢用相机还