HTML5 автофокусировка без перемещения страницы

Question

Я поместил в поле ввода атрибут autofocus, но сама форма находится примерно на полпути вниз по странице. Это означает, что когда страница сначала загружается, пользователь не видит инструкции в верхней части страницы, рассказывая им, что делать.

Как включить autofocus в поле ввода, чтобы курсор был готов начать ввод в это поле, но не заставляя страницу прокручиваться до этого поля на странице. Является ли это возможным?

Answer 1

Это поведение браузера по умолчанию для прокрутки до элемента autofocus. Но, немного изменив код, вы можете получить желаемое поведение. Я попытался имитировать ваше требование. Пожалуйста, посмотрите ниже код & попробуйте запустить в вашем браузере.

Игнорировать дополнительные 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 &, а затем установите .focus() на этот элемент.

Здесь opacity: 0; используется вместо display: none; в autofocus не может быть применен, если свойство элемента display устанавливается в none. Вы можете обратиться к Mozilla/input за дополнительной информацией.

Надеюсь, это поможет.