Remove Blue Outline

by Allie Yu

HTML

<!-- 
https://medium.com/hackernoon/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
https://codepen.io/davidgilbertson/pen/LjGzGw

暂时没用的
https://codepen.io/danield770/pen/RgzLrm?editors=1100 //css
https://codepen.io/andyadams/pen/KbrVYx  //focus-visible 


元素直接加 outline：none

-->

CSS

body.user-is-tabbing *:focus {
	outline: 2px solid #7AACFE !important; /* for non-webkit browsers */
  	outline: 5px auto -webkit-focus-ring-color !important;
}

JavaScript

function handleFirstTab(e) {
    if (e.keyCode === 9) {
      document.body.classList.add('user-is-tabbing');
      window.removeEventListener('keydown', handleFirstTab);
    }
  }
window.addEventListener('keydown', handleFirstTab);

function handleMouseDownOnce() {
    document.body.classList.remove('user-is-tabbing');

    window.removeEventListener('mousedown', handleMouseDownOnce);
    window.addEventListener('keydown', handleFirstTab);
}
window.addEventListener('click', handleMouseDownOnce);