Как заставить атрибут «title» показывать, даже когда «<input>» активен (нажат) - PullRequest
Новая
       6

Как заставить атрибут «title» показывать, даже когда «<input>» активен (нажат)

0 голосов
/ 03 марта 2020

Например: 

<input type="text" title="Here is my title"  value="smth"/>

Если вы просто наведите курсор мыши (без щелчка) на 2 секунды, появится title. Но как заставить title отображаться, даже если пользователь нажимает (не ждет 2 секунды) в текстовом поле?

ПРИМЕЧАНИЯ:

1) Я заинтересован в чистом подходе, без библиотек.

2) Я не заинтересован в добавлении дополнительных <html> элементы, потому что есть решение для этого .

1 Ответ

2 голосов
/ 03 марта 2020

без библиотеки: 

input[type=text] + span {
  display: none;
}
input[type=text]:focus + span {
  display: inline;
}
<input type="text" title="Here is my title"  value="smth"/> <span>Here is my title</span>

Использование сценария для получения заголовка 

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

window.addEventListener("load",() => {
  document.querySelectorAll("input[type=text]").forEach(inp => {
    let span = document.createElement('span');
    span.innerHTML = inp.getAttribute("title");
    insertAfter(span, inp);
  })
})  
input[type=text] + span {
  display: none;
}
input[type=text]:focus + span {
  display: inline;
}
<input type="text" title="Here is my title 1"  value="smth"/><br/>
<input type="text" title="Here is my title 2"  value="smth"/><br/>
<input type="text" title="Here is my title 3"  value="smth"/><br/>
...