【发布时间】：2021-11-01 19:39:34
【问题描述】：
您好，我想显示带有tab key press（键盘可访问性）的编辑图标，并且一旦从键盘上按下回车键就必须发出警报。
预期的解决方案（可以是以下任一解决方案）：
1.最佳： 在标签按钮按下时，直接突出显示列表上的编辑图标并在输入键时按下 alert must come - 1 步
2。好的： 在标签按钮按下时，突出显示列表项，然后在下一个标签上按下突出显示编辑图标并在输入键时按下 alert must come - 2 步
下图显示非工作演示
以下是我尝试过的：
function editClicked(){
alert('tab and enter key pressed')
}ul{
list-style:none;
margin:0;
padding:0;
}
li{
width:100%;
height:80px;
display:flex;
justify-content:space-between;
margin-top:20px;
}
li{
border:1px solid yellow;
}
li:hover{
border:1px solid red;
}
li span.edit{
visibility:hidden;
}
ul li:hover span.edit{
visibility:visible;
}<ul>
<li tabindex="0">
<span>content</span>
<span onclick="editClicked()" class="edit" tabindex="0" ><svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="bi bi-pen-fill"><path fill-rule="evenodd" d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001z"></path></svg></span>
</li>
<li tabindex="0">
<span>content</span>
<span onclick="editClicked()" class="edit" tabindex="0"><svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="bi bi-pen-fill"><path fill-rule="evenodd" d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001z"></path></svg></span>
</li>
<li tabindex="0">
<span>content</span>
<span onclick="editClicked()" class="edit" tabindex="0"><svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="bi bi-pen-fill"><path fill-rule="evenodd" d="M13.498.795l.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001z"></path></svg></span>
</li>
<ul>【问题讨论】：
-
很难理解你想要达到的目标，多解释一下你的预期结果
-
@AmirRahman 这很简单，按键盘上的 Tab 键，看看编辑图标没有显示
-
我不知道尽管有这么多观点（100+），但我仍然没有得到答案。问题有那么难吗。我认为这对每个人来说都是正常的工作流程。
-
它在逻辑上并不难，它只需要根据您的要求进行一些自定义工作，它更像是一个工作岗位，而 Stack Overflow 主要专注于帮助人们处理他们遇到困难和需要帮助的代码或需要一些特定主题的知识
-
我还想补充一点，在您当前的代码中，主要问题是当您第二次按 Tab 键时，它会失去父级的焦点并跳转到编辑按钮，此时编辑按钮已经失去可见性，因为结果编辑按钮没有获得焦点
标签： javascript html jquery css