Есть ли простой способ установить фокус (курсор ввода) веб-страницы на первом элементе ввода (текстовое поле, раскрывающийся список, ...) при загрузке страницы без необходимости знать идентификатор элемента?
Я хотел бы реализовать его как общий сценарий для всех моих страниц / форм моего веб-приложения.
Ответы:
Вы также можете попробовать метод на основе jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Хотя это не отвечает на вопрос (требуется общий сценарий), я, хотя другим может быть полезно знать, что HTML5 вводит атрибут «автофокус»:
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
Подробнее об HTML5 .
autofocusбез значения spring:form. autofocus="autofocus"хотя работает нормально. Спасибо, @Jacob.
document.forms[0].elements[0].focus();
Это можно уточнить, используя цикл, например. не фокусировать определенные типы полей, отключенные поля и так далее. Лучше может быть , чтобы добавить класс = «автофокус» в поле вы на самом деле действительно сосредоточены хотите, и перебрать формы [я] .elements [J] ищет для этого Classname.
В любом случае: обычно не рекомендуется делать это на каждой странице. Когда вы фокусируете ввод, пользователь теряет возможность, например. прокрутите страницу с клавиатуры. Если неожиданно, это может раздражать, поэтому автоматическая фокусировка только тогда, когда вы уверены, что использование поля формы будет тем, что пользователь хочет сделать. т.е. если вы Google.
Наиболее полное выражение jQuery, которое я нашел работающим, - это (с помощью здесь )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Если вы используете платформу Prototype JavaScript, вы можете использовать метод focusFirstElement :
Form.focusFirstElement(document.forms[0]);
Здесь есть описание, которое может быть полезно: Установите фокус на первый ввод на веб-странице
Вам также необходимо пропустить любые скрытые входы.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whileоператор?
Помещение этого кода в конец вашего bodyтега автоматически сфокусирует первый видимый, не скрытый активированный элемент на экране. Он справится с большинством случаев, которые я могу придумать в короткие сроки.
<script>
(function(){
var forms = document.forms || [];
for(var i = 0; i < forms.length; i++){
for(var j = 0; j < forms[i].length; j++){
if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
forms[i][j].focus();
return;
}
}
}
})();
</script>
Пробовал много ответов выше, и они не работали. Нашел это по адресу: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Спасибо, Колодвор.
$("input:text:visible:first").focus();
Я использую это:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Он получает первый из всех видимых общих входных данных, включая текстовые поля и поля выбора. Это также гарантирует, что они не будут скрыты, отключены или доступны только для чтения. он также позволяет использовать целевой div, который я использую в своем программном обеспечении (т.е. первый ввод внутри этой формы).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
без jquery, например, с обычным javascript:
document.querySelector('form input:not([type=hidden])').focus()
работает в Safari, но не в Chrome 75 (апрель 2019 г.)
Это включает текстовые поля и исключает переключатели
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
Вы должны иметь возможность использовать clientHeight вместо проверки атрибута display, поскольку родительский элемент может скрывать этот элемент:
function setFocus() {
var forms = document.forms || [];
for (var i = 0; i < forms.length; i++) {
for (var j = 0; j < forms[i].length; j++) {
var widget = forms[i][j];
if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
&& (typeof widget.disabled === "undefined" || widget.disabled === false)
&& (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
widget.focus();
break;
}
}
}
}
}
Без сторонних библиотек используйте что-то вроде
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Убедитесь, что вы учитываете все теги элементов формы, исключите скрытые / отключенные, как в других ответах, и так далее.