如何使工具提示在 HTML 表单中工作

How to get a tooltip working within a HTML form?

本文关键字：表单 工作 HTML 何使 工具提示      更新时间：2023-09-26

我正在 youtube https://www.youtube.com/watch?v=yqKrCQcsaAA上按照此工具提示教程进行操作，并认为我已经确定了它，但是当我使用工具提示功能时，它正在删除我的输入框。

这是我的代码： 

<input type="text" name="pword1" class="iBox" id="pword1" autocomplete="off"  onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="reqMetVal()" placeholder="choose a password" >
function ShowToolTip(){
    document.getElementById("pword1").style.visibility = 'visible';
}
function HideToolTip(){
    document.getElementById("pword1").style.visibility = 'hidden';
}
然后当我在

浏览器中启动它以测试它时，当我将鼠标悬停在输入框上时，它会消失，只能通过刷新页面并按 Tab 键进入它来进入它

你真正需要做的是了解代码在做什么。你现在的方式，你可以盲目地将后门复制并粘贴到你的网站上，发现你的服务器被黑客入侵，你不会知道你做了什么。（这就是最近的"社交.png"黑客攻击最近如此普遍的原因）。

代码的功能部分包括：

  • onmouseout="HideToolTip()"
  • onmouseover="ShowToolTip()"

HideToolTip获取 ID 为 pword1 的元素并将其隐藏。 pword1 是输入元素，如代码中的 id="pword1" 属性所示。

所以基本上，当你把鼠标移出盒子时，它就会消失。您无法mouseover隐藏元素，因此无法将其取回。

从你的问题中不可能确切地看出你打算做什么，但也许就是这样？

function ShowToolTip(){
    document.getElementById("tooltipbox").style.visibility = 'visible';
}
function HideToolTip(){
    document.getElementById("tooltipbox").style.visibility = 'hidden';
}
<input type="text" name="pword1" class="iBox" id="pword1" autocomplete="off"  onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="reqMetVal()" placeholder="choose a password" >
<p id="tooltipbox" style="visibility:hidden">This is the tooltip</p>

相关文章：