工具提示在提交按钮上不起作用

Tooltip not working on submit button

本文关键字：不起作用 按钮 提交 工具提示      更新时间：2023-09-26

我的HTML文件中有这段代码：

<div class="first">
    <label> Enter Password: </label>
        <input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
        <p id="tooltipbox" style="visibility:hidden">This is the tooltip</p>
    </div>
    <div class="second">
        <label> Confirm Password: </label>
        <input type="text" name="cPassword" class="iBox"  id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off">
        <p id="combination"></p>
    </div>
    <div class="third">
        <input type="submit" id="submitButton" value="submit" disabled="disabled" onmouseout="SubmitToolTipHide()" onmouseover="SubmitToolTip()">
        <p id="subTT" style="visibility:hidden">Passwords do not match</p>
    </div>

这些是我的函数：

function ShowToolTip(){
    document.getElementById("tooltipbox").style.visibility = 'visible';
}
function HideToolTip(){
    document.getElementById("tooltipbox").style.visibility = 'hidden';
}
function SubmitToolTip(){
    document.getElementById("subTT").style.visibility = 'visible';
}
function SubmitToolTipHide(){
    document.getElementById("subTT").style.visibility = 'hidden';
}

当我将鼠标悬停在密码的文本区域上时，工具提示会正确显示，当我将鼠标移到该区域之外时，工具提示会正确消失。我不明白为什么以相同的逻辑，当我将鼠标悬停在提交按钮上时，它不会出现在提交按钮上。即使我使用了相同的Javascript函数。

这是因为您的提交按钮被禁用。如果您删除禁用="禁用"它将起作用。在该代码中，当密码字段更改并显示/隐藏工具提示时进行检查可能是有意义的，而不是悬停时 - 只需禁用提交按钮，直到它们匹配。

相关文章：