Czy istnieje prosty sposób na ustawienie fokusu (kursora wejściowego) strony internetowej na pierwszym elemencie wejściowym (pole tekstowe, lista rozwijana, ...) podczas ładowania strony bez znajomości identyfikatora elementu?
Chciałbym zaimplementować go jako wspólny skrypt dla wszystkich moich stron / formularzy mojej aplikacji internetowej.
Odpowiedzi:
Możesz także wypróbować metodę opartą na jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Chociaż to nie odpowiada na pytanie (wymagające wspólnego skryptu), pomyślałem, że dla innych może być przydatne, aby wiedzieć, że HTML5 wprowadza atrybut „autofocus”:
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
Zanurz się w HTML5 , aby uzyskać więcej informacji.
autofocusbez wartości spring:form. autofocus="autofocus"działa jednak dobrze. Dzięki, @Jacob.
document.forms[0].elements[0].focus();
Można to udoskonalić za pomocą pętli do np. nie skupiać się na niektórych typach pól, polach wyłączonych i tak dalej. Lepiej może być dodanie class = "autofocus" do pola, które faktycznie robisz Kupię skoncentrowane i pętli nad formami [I] .elements [J] szukających tego className.
W każdym razie: robienie tego na każdej stronie zwykle nie jest dobrym pomysłem. Kiedy skupisz się na wejściu, użytkownik traci możliwość np. przewiń stronę z klawiatury. Jeśli jest to nieoczekiwane, może to być denerwujące, więc automatyczne ustawianie ostrości tylko wtedy, gdy masz pewność, że użycie pola formularza będzie tym, co chce zrobić użytkownik. to znaczy. jeśli jesteś Google.
Najbardziej wszechstronnym wyrażeniem jQuery, które znalazłem działającym, jest (dzięki pomocy tutaj )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Jeśli korzystasz ze struktury Prototype JavaScript, możesz użyć metody focusFirstElement :
Form.focusFirstElement(document.forms[0]);
Jest tu zapis, który może być przydatny: Ustaw fokus na pierwsze wejście na stronie internetowej
Musisz także pominąć wszelkie ukryte dane wejściowe.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whilewyciągu?
Umieszczenie tego kodu na końcu bodytagu automatycznie ustawi pierwszy widoczny, niewidoczny, włączony element na ekranie. Poradzi sobie z większością spraw, które przyjdą mi z krótkim wyprzedzeniem.
<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>
Wypróbowałem wiele powyższych odpowiedzi i nie działały. Znalazłem to na: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Dziękuję Kolodvor.
$("input:text:visible:first").focus();
Używam tego:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Spowoduje to pobranie pierwszego z widocznych wspólnych danych wejściowych, w tym obszarów tekstowych i pól wyboru. Daje to również pewność, że nie są one ukryte, wyłączone ani tylko do odczytu. dopuszcza również docelowy element div, którego używam w moim oprogramowaniu (tj. pierwsze wejście w tym formularzu).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
Obejmuje to obszary tekstowe i nie obejmuje przycisków opcji
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
Powinieneś móc użyć clientHeight zamiast sprawdzać atrybut display, ponieważ rodzic mógłby ukrywać ten element:
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;
}
}
}
}
}
Bez bibliotek innych firm użyj czegoś takiego jak
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Upewnij się, że bierzesz pod uwagę wszystkie tagi elementów formularza, wykluczaj ukryte / wyłączone, jak w innych odpowiedziach i tak dalej.
bez jquery, np. ze zwykłym javascript:
document.querySelector('form input:not([type=hidden])').focus()
działa na Safari, ale nie Chrome 75 (kwiecień 2019)