Есть ли простой способ установить фокус (ввод курсора) веб-страницы на первом элементе ввода (текстовое поле, раскрывающийся список,...) при загрузке страницы без необходимости знать идентификатор элемента?
Я хотел бы реализовать его как общий script для всех моих страниц/форм моего веб-приложения.
Вы также можете попробовать метод на основе jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Хотя это не отвечает на вопрос (требуется общий script), хотя мне может быть полезно, чтобы другие знали, что HTML5 вводит атрибут autofocus:
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
Погружение в HTML5 содержит дополнительную информацию.
document.forms[0].elements[0].focus();
Это можно уточнить, используя цикл, например. не фокусировать определенные типы полей, отключенные поля и т.д. Лучше может добавить "автофокус" class= в поле, которое вы действительно хотите сфокусировать, и перебрать формы [i].elements [j], ища это имя класса.
Во всяком случае: обычно не рекомендуется делать это на каждой странице. Когда вы фокусируете вход, пользователь теряет способность, например. прокрутите страницу с клавиатуры. Если это неожиданно, это может быть раздражающим, поэтому только автофокус, когда вы уверены, что использование поля формы будет тем, что пользователь хочет сделать. то есть. если вы Google.
Наиболее полное выражение jQuery, которое я нашел, работает (с помощью здесь)
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Если вы используете рамки Prototype, вы можете использовать focusFirstElement:
Form.focusFirstElement(document.forms[0]);
Здесь может быть использована запись: Установить фокус на первый вход на веб-странице
Вам также нужно пропустить любые скрытые входы.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
Поместив этот код в конец тэга 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();
Это получает первый из видимых общих входных данных, включая текстовые поля и поля выбора. Это также гарантирует, что они не скрыты, не отключены или не прочитаны. он также позволяет использовать целевой div, который я использую в своем программном обеспечении (т.е. первый ввод внутри этой формы).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
Я использую это:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Для тех, кто использует JSF2.2 + и не может передать автофокус как атрибут без значения для него, используйте это:
p:autofocus="true"
И добавьте его в пространство имен p (Также часто используется pt. Что бы вы ни хотели).
<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
С AngularJS:
angular.element('#Element')[0].focus();
Это включает текстовые поля и исключает переключатели
$(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 вместо проверки атрибута отображения, поскольку родительский элемент может скрывать этот элемент:
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();
}
Убедитесь, что вы учитываете все теги элементов формы, исключите скрытые/отключенные, как в других ответах и т.д.
без jquery, например, с обычным JavaScript:
document.querySelector('form input:not([type=hidden])').focus()
работает на Safari, но не на Chrome 75 (апрель 2019)