Чи є простий спосіб встановити фокус (вхідний курсор) веб-сторінки на перший елемент введення (текстове поле, випадаючий список, ...) при завантаженні сторінки, не знаючи ідентифікатора елемента?
Я хотів би застосувати його як загальний сценарій для всіх моїх сторінок / форм мого веб-додатку.
Відповіді:
Ви також можете спробувати метод на основі 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();
});
Якщо ви використовуєте прототип фреймворку JavaScript, тоді ви можете використовувати метод focusFirstElement :
Form.focusFirstElement(document.forms[0]);
Тут є запис, який може бути корисним: встановіть для Focus значення First Input на веб-сторінці
Вам також потрібно пропустити будь-які приховані введення.
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();
Це включає текстові області та виключає перемикачі
$(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();
}
Обов’язково розгляньте всі теги елементів форми, виключіть приховані / відключені, як у інших відповідях тощо.
без jquery, наприклад із звичайним javascript:
document.querySelector('form input:not([type=hidden])').focus()
працює на Safari, але не на Chrome 75 (квітень 2019)