javascript - 使用键盘制表键 tabindex 元素未显示

Question

嗨，我想显示带有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>

标签： javascripthtmljquerycss

Answer 1

修复您的问题并向文档tabindexes添加keydown事件使第二个预期的解决方案成为可能。

function editClicked(){
   alert('editClicked clicked')
}     

document.addEventListener('keydown', logKey);

function logKey(e) {
    if (e.code != "Enter") return;
    let a = document.activeElement; // active element
    if (a.className == "edit") {
        editClicked();
    }
}

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:focus{
  border:1px solid red;
}   

li .edit{
  opacity: 0;
}

ul li:focus .edit, ul li .edit:focus {
   opacity: 1;
}

<ul>
   <li tabindex="1">
     <span>content</span>
     <span tabindex="2" onclick="editClicked()" class="edit"><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="3">
     <span>content</span>
     <span tabindex="4" onclick="editClicked()" class="edit"><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="5">
     <span>content</span>
     <span tabindex="6" onclick="editClicked()" class="edit"><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>