HTML5 无需移动页面即可自动对焦

Question

我已将 autofocus 的属性放在输入字段上，但表单本身大约位于页面的中间位置。这意味着当页面首次加载时，用户看不到页面顶部的说明告诉他们该做什么。

如何在输入字段上启用 autofocus 以便光标准备好开始在该字段中输入内容，但不会导致页面滚动到页面上的该字段。可能吗？

Answer 1

滚动到 autofocus 元素是浏览器的默认行为。但是，通过一些代码调整，您可以获得所需的行为。我试图模拟您的要求。请查看以下代码并尝试在浏览器中运行。

Ignore the additional styles. They are just to support my simulation.

代码段

CSS

body, p {
  padding: 0;
  margin: 0;
}

input {
  padding: 5px;
}

#autofocus {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}

#contentWrapper {
  padding: 10px;
}

#contentWrapper form {
  margin-top: 600px;
}

#contentWrapper p:last-child {
  margin-top: 200px;
}

HTML

<form id="autofocus">
  <input type="text" id="autofocusInit" autofocus>
</form>
<div id="contentWrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Autofocus element is 600px down below!</h3>

  <form>
    <h3>Let's focus here...</h3>
    <input type="text" id="autofocusTarget" placeholder="Autofocus here...">
  </form>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

JavaScript

(function() {
  document.querySelector('#autofocusInit').addEventListener('keydown', function(e) {
    console.log(e);
    this.setAttribute('autofocus', false);
    document.querySelector('#autofocusTarget').focus();
  });
})();

这样就可以了。

另一方面，您可以检测元素何时位于 viewport 中，然后在该元素上设置 .focus()。

Here, opacity: 0; is used instead of display: none; as autofocus cannot be applied if the element's display property is set to none. You can refer Mozilla/input for more information.

希望对您有所帮助。

Answer 2

如果有人在看这个老问题，我们通过将页面定位到顶部来解决它。为要定位的元素添加一个id，然后使用...

if ($('#top-of-page').length) {
  $('#top-of-page').get(0).scrollIntoView();
}

我们定位到顶部，因此是“页面顶部”的 id，但您可以使用您喜欢的任何 id 定位到任何位置。开头的“if”只是检查id是否存在。

HTML5 无需移动页面即可自动对焦

HTML5 autofocus without moving page

html

autofocus