Question

我有一个简单的表格，必须可以访问。如果有人错过了必填字段，则错误应显示在我放置div标签的页面顶部。现在，在我单击提交按钮后，它应该在页面顶部显示一条错误消息，然后有一个焦点，以便屏幕阅读器可以在不刷新页面的情况下读取它。我只是无法专注于那个错误。任何建议都会非常感激。谢谢我的代码看起来像这样

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function myFunction() {
    document.getElementById("errors").innerHTML = "ERROR ON THE FORM";
}

function getfocus() {
    document.getElementById("errors").focus();
}

function printnfocus() {
    if (myFunction()) {
        getfocus();
    }
}
</script>
</head>

<body>
    <div id="errors"></div>
    <fieldset>
        <legend>Eligibility</legend> <input type="checkbox" id="citizen"> <label for="citizen">I am a U.S. citizen</label><br>
        <input type="checkbox" id="18"> <label for="18">I am a 18 years old</label>
    </fieldset>
    <p>
        <br>
    </p>
    <form id="sex" name="sex">
        <fieldset>
            <legend>Sex:</legend> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br>
            <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br>
            <br>
        </fieldset>
    </form>
    <fieldset>
        <legend>Personal Information</legend>
        <form>
            <label for="lname">Last Name</label> <span title="lblAstrisk" class="asterisk" style="color:red">*</span> <input type="text" name="lname" id="lname" required=""><br>
            <br>
        </form>
    </fieldset>
    <p>
        <button type="button" onclick="printnfocus()">Submit</button>
    </p>
</body>
</html>

Answer 1

您正在寻找window.scrollTo()。您可以使用以下内容获取errors div的位置：

document.getElementById('errors').offsetTop

如何专注于页面顶部的文本

1 个答案: