Question

0

81

Vistas

Remove attribute on tab press and restore it on blur

I have a function which detects when user press TAB key. Main goal is to check if user navigates to anchor elements. I want to remove tittle attribute from it, but when he press tab again and go to another element, I want to restore title back. At this point I'm removing it on focus and set data-title property. I thought maybe I can restore title from data-title attribute on blur. Is there any way to achieve it?

function checkTabPress (e) {
      let activeElement
      if (e.keyCode === 9) {
        activeElement = document.activeElement
        if (activeElement.tagName.toLowerCase() === 'a') {
          activeElement.setAttribute('data-title', activeElement.getAttribute('title'))
          activeElement.removeAttribute('title')
        }
      }
    }

    const wrapper = document.getElementById('wrapper')
    wrapper.addEventListener('keyup', checkTabPress)

a:focus {
  color: red;
}

<div id="wrapper">
  <a title="link 1" href="">link 1</a>
  <a title="link 2" href="">link 2</a>
  <a title="link 3" href="">link 3</a>
  <a title="link 4" href="">link 4</a>
</div>

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T05:29:30.166Z

Check this:

function checkTabPress (e) {
  let activeElement
  if (e.keyCode === 9) {
    activeElement = document.activeElement
    if (activeElement.tagName.toLowerCase() === 'a') {
      activeElement.setAttribute('data-title', activeElement.getAttribute('title'))
      activeElement.removeAttribute('title')
    }
  }
}

const body = document.querySelector('body')
body.addEventListener('keyup', checkTabPress)

body.addEventListener("blur", function( event ) {
  var title = event.target.getAttribute('data-title');
  if (title) {
      event.target.setAttribute('title', title)
    event.target.removeAttribute('data-title')
  }
}, true);

We simply added a blur event and do the opposite that you are doing to remove the title.

Answer 2 · 2022-07-03T05:29:30.175Z

You could simply restore titles on all anchors with each tab press.

function checkTabPress(e) {
  let activeElement

  if (e.keyCode === 9) {
    // restore titles on all anchors
    const anchors = document.querySelectorAll('a'); // could be reduced with a parent selector

    anchors.forEach(function(anchor) {
      anchor.setAttribute('title', anchor.getAttribute('data-title'))
      anchor.removeAttribute('data-title')
    })
    
    activeElement = document.activeElement

    if (activeElement.tagName.toLowerCase() === 'a') {
      activeElement.setAttribute('data-title', activeElement.getAttribute('title'))
      activeElement.removeAttribute('title')
    }
  }
}

const wrapper = document.getElementById('wrapper')
wrapper.addEventListener('keyup', checkTabPress)

a:focus {
  color: red;
}

<div id="wrapper">
  <a title="link 1" href="">link 1</a>
  <a title="link 2" href="">link 2</a>
  <a title="link 3" href="">link 3</a>
  <a title="link 4" href="">link 4</a>
</div>