即使“<input>”处于活动状态（单击），如何强制显示“title”属性答案

【问题标题】：How to force "title" attribute to show even when is "<input>" active (clicked)即使“<input>”处于活动状态（单击），如何强制显示“title”属性
【发布时间】：2020-03-03 17:01:19
【问题描述】：

例如：

&lt;input type="text" title="Here is my title"  value="smth"/&gt;

如果您只是将鼠标悬停（不点击）2 秒，title 将出现。但是，即使用户在文本字段中单击（不等待 2 秒），如何强制 title 显示？

注意事项：

1) 我对没有库的纯方法感兴趣。

2) 我对添加额外的<html> 元素不感兴趣，因为那里有is solution for that。

【问题讨论】：

您可能需要查看placeholder 属性。这会在输入字段中显示灰色的描述，直到输入实际文本。
@frececroka 谢谢，我不是placeholder 我知道； )
由于这是浏览器的一种行为，您需要使用显示相同文本的 js 工具提示
您可能需要一个 javascript Tooltip 库。
谁能说出为什么投票不赞成？

标签： html css input css-transitions

【解决方案1】：

没有库：

input[type=text] + span {
  display: none;
}
input[type=text]:focus + span {
  display: inline;
}

&lt;input type="text" title="Here is my title"  value="smth"/&gt; &lt;span&gt;Here is my title&lt;/span&gt;

使用脚本获取标题

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/>

【讨论】：

既然有这样的，+1！
好吧，谢谢你的回答，只是我不想添加额外的html元素......但是，赞成的答案......（是否有任何可能改变浏览器属性/行为的JS /原型脚本关于标题？至少，缩短了 2 秒到 0.2 秒）
@T.Todua 我的第二个版本不需要在标记中添加额外的 HTML。它从输入生成跨度。无法更改标题显示的内置延迟