Javascript 如何关注页面顶部的文本_Javascript_Html

Javascript 如何关注页面顶部的文本

javascript html

Javascript 如何关注页面顶部的文本,javascript,html,Javascript,Html,我有一个简单的表格，必须是可访问的。如果有人遗漏了一个必填字段，那么在我放置div标记的页面顶部应该会显示一个错误。现在，在我单击submit按钮之后，它应该在页面顶部显示一条错误消息，然后有一个焦点，这样屏幕阅读器就可以在不刷新页面的情况下阅读它。我只是不能专注于那个错误。任何建议都将不胜感激。谢谢我的代码如下所示 <!DOCTYPE html> <html> <head> <title>TEST</title> <scri

我有一个简单的表格，必须是可访问的。如果有人遗漏了一个必填字段，那么在我放置div标记的页面顶部应该会显示一个错误。现在，在我单击submit按钮之后，它应该在页面顶部显示一条错误消息，然后有一个焦点，这样屏幕阅读器就可以在不刷新页面的情况下阅读它。我只是不能专注于那个错误。任何建议都将不胜感激。谢谢我的代码如下所示

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


试验
函数myFunction（）{
document.getElementById（“errors”）.innerHTML=“表单上的错误”；
}
函数getfocus（）{
document.getElementById（“错误”）.focus（）；
}
函数printfocus（）{
if（myFunction（））{
getfocus（）；
}
}
资格我是美国公民

我今年18岁




性别：男性

女性



个人信息
姓氏*




提交

您正在寻找的。您可以通过以下方法获取

错误div的位置：
document.getElementById('errors').offsetTop

不能将焦点放在非输入元素上。在这种情况下，当遇到错误时，您需要设置滚动动画。可能相关吗？我部分地理解了它。我保留了一个div作为错误容器。现在，在有人单击submit按钮后，我需要先运行myFunction（）以显示错误消息，然后运行window.scrollTo？我在Javascript方面没有太多经验。如果你能指出我的代码应该在哪里编辑和修改？谢谢我试过了我的dc5贴的步骤。我可以让屏幕阅读器阅读错误信息，并使用tabindex将其聚焦，前提是我从一开始就通过地址栏、谷歌搜索栏、框架，然后是错误信息，但当我单击submit按钮时，焦点仍然在同一个按钮上。我想把它放在屏幕的顶部，而不是坐在那里。好了，伙计们，我让它工作了，但我不知道这是否是一个好的练习。在我有了标签索引之后，我像这样调用了函数，它成功了！我还有一个问题，如何让错误图像首先集中在左侧，而信息集中在右侧？我正在尝试一个函数，document.getElementBy Id（“errors”）.src=“”；但由于某些原因，它不起作用。有什么想法吗？