javascript - tabindex is given it is focusing but on enter key enter it won't work - Stack Overflow

admin管理员组

文章数量:1432436

When I click on search icon with mouse it works fine , but when i use tab and focus goes to icon but when i enter "ENTER" keyword it won't work .

` <%-- Mobile Only - Search Icon --%>
 <div class="mobile-header-icon" onclick="OnClickSearchIcon();" tabindex="0" 
           aria-label="Search">
     <i class="search" ></i>
        </div>`

When I click on search icon with mouse it works fine , but when i use tab and focus goes to icon but when i enter "ENTER" keyword it won't work .

` <%-- Mobile Only - Search Icon --%>
 <div class="mobile-header-icon" onclick="OnClickSearchIcon();" tabindex="0" 
           aria-label="Search">
     <i class="search" ></i>
        </div>`

• javascript
• html
• jsp

Share Improve this question Follow asked Mar 31, 2022 at 8:04 tech cooltech cool 6311 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Pressing enter does not fire a click event.

You could add a listener for e.g. keyup event.

---

Here is a full working example:

function OnClickSearchIcon(){
  // do whatever you want instead of this
  document.body.innerHTML += "<p>Search!</p>";
}

function onKeyUp(e){
  if (e.key === "Enter") OnClickSearchIcon();
}

<div tabindex=0 onkeyup="onKeyUp(event)" onclick="OnClickSearchIcon()" >
  <i class="search" >Click, or focus me and press Enter</i>
</div>

本文标签： javascripttabindex is given it is focusing but on enter key enter it won39t workStack Overflow