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>`
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>