カスタムボタンはクリック時にフォーカスを削除しますが押していません

Question

マウスクリック時にボタンからフォーカスを削除するのに最適な方法はありますが、EnterキーをJavascriptで押した場合は表示されません。 clickイベントでblur()メソッドを使用していますが、動作しません。

アクセシビリティ上の理由からoutline: noneまたはoutline: 0を使用することはできません。 http://www.outlinenone.com/

var button = document.getElementById("btn"); 
 
button.addEventListener("click", removeFocus); 
 

 
function removeFocus(event) { 
 
\t event.target.blur(); 
 
}

button { 
 
    display: inline-block; 
 
    border: none; 
 
    height: 36px; 
 
    line-height:36px; 
 
    padding: 0 12px; 
 
    background: cyan; 
 
}

<button id="btn"> 
 
    Hello 
 
</button>

Answer 1

Javascriptのソリューション

var button = document.getElementById("btn"); 
 
button.addEventListener("click", clickEvent); 
 
button.addEventListener("keypress", clickEvent); 
 
function clickEvent(event){ 
 
    if (event.keyCode == 13) { 
 
    event.preventDefault(); 
 
    } else { 
 
    button.blur(); 
 
    } 
 
}

button { 
 
    display: inline-block; 
 
    border: none; 
 
    height: 36px; 
 
    line-height:36px; 
 
    padding: 0 12px; 
 
    background: cyan; 
 
}

<button id="btn"> 
 
    Hello 
 
</button>