как сделать чтобы окошко появлялось не как ховер а при фокусе инпута?

Question

Есть код который при наведении на инпут показывает окошко с текстом в диве но надо как-то сделать чтобы окошко появлялось при нажатии на инпут покажите как это сделать заранее спасибо

const focusOnMe = document.getElementsByClassName('focusOnMe')[0];
const mypopup = document.getElementById('mypopup');

focusOnMe.addEventListener("mouseover", showPopup);
focusOnMe.addEventListener("mouseout", hidePopup);

function showPopup(evt) {
  const focusPos = focusOnMe.getBoundingClientRect();
  mypopup.style.left = (focusPos.right + 20) + "px";
  mypopup.style.top = (window.scrollY + focusPos.top - 60) + "px";
  mypopup.style.display = "block";
}

function hidePopup(evt) {
  mypopup.style.display = "none";
}

<form>
  <input class="focusOnMe" type="text">
</form>
<div id="mypopup">
  <h3>Popup title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

Просто замените mouseover и mouseout на focusin и focusout

Answer 2

Можно использовать фокус, и события focus и focusout.
Тут есть описание.
Вот пример:

let control = document.querySelector('[control-focus]');
let controlledClass = control.getAttribute('control-focus');
let controlledElement = document.getElementsByClassName(controlledClass);
if (controlledElement.length > 0) {
  control.addEventListener('focusin', () => {
    show();
  });
  control.addEventListener('focusout', () => {
    hide();
  });
}

function show() {
  controlledElement[0].classList.remove('hide');
}

function hide() {
  controlledElement[0].classList.add('hide');
}

.hide {
  display: none;
}

<input value="hello!" control-focus='controlled'><br>
<input value="other input"><br>
<div class="controlled hide">hello!</div>

БЛОГ НА HUSL

как сделать чтобы окошко появлялось не как ховер а при фокусе инпута?

Ответы (2 шт):