javascript - HTML DOM 目标属性 self

Question

我的注册页面上有很多字段，但错误消息只会显示在页面顶部，我不希望客户继续向上滚动以查看他们在上面输入错误内容时的错误消息是什么 field 。我可以知道如何在这种情况下使用“目标”或任何其他方法吗？

这是我的屏幕示例，当用户输入错误时，错误消息实际上显示在屏幕顶部，但用户必须向上滚动并检查错误消息，有什么方法可以使用聚焦/定位/向上滚动以查看错误消息？

这是我当前的屏幕示例代码:1 SAMPLE
P/s: 我只为username 字段做函数，当在用户名字段上onblur 时它会运行javascript 函数

Answer 1

是的，如果您设置了 location.hash，它会将页面滚动到具有该 id 的元素。

例子:

document.querySelector("input[type=button]").onclick = function() {
  document.getElementById("error").style.display = "";
  location.href = "#error";
};

<p>Scroll all the way to the bottom</p>
<p id="error" style="display: none">This is the error message</p>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<input type="button" value="Click me">