Question

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

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

Answer 1

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

忽略其他styles。它们只是为了支持我的模拟。

代码段

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＆amp;然后在该元素上设置.focus()。

此处使用opacity: 0;代替display: none;作为autofocus 如果元素的display属性设置为，则无法应用 none。您可以参考Mozilla/input了解更多信息。

希望这有帮助。

没有移动页面的HTML5自动对焦

1 个答案: