Esiste un modo semplice per impostare il focus (cursore di input) di una pagina web sul primo elemento di input (casella di testo, elenco a discesa, ...) al caricamento della pagina senza dover conoscere l'id dell'elemento?
Vorrei implementarlo come uno script comune per tutte le mie pagine / moduli della mia applicazione web.
Risposte:
Puoi anche provare il metodo basato su jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Sebbene questo non risponda alla domanda (richiedendo uno script comune), ho pensato che potrebbe essere utile per gli altri sapere che HTML5 introduce l'attributo 'autofocus':
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
Tuffati in HTML5 ha più informazioni.
autofocussenza alcun valore spring:form. autofocus="autofocus"funziona bene, però. Grazie, @Jacob.
document.forms[0].elements[0].focus();
Questo può essere perfezionato usando un ciclo per es. non focalizzare determinati tipi di campo, campi disabilitati e così via. Meglio potrebbe essere quella di aggiungere una class = "autofocus" per il campo che in realtà non vogliono concentrati, e un ciclo su forme [i] .elements [J] alla ricerca di quel className.
Comunque: normalmente non è una buona idea farlo su ogni pagina. Quando focalizzi un input l'utente perde la capacità, ad es. scorrere la pagina dalla tastiera. Se imprevisto, questo può essere fastidioso, quindi autofocus solo quando sei abbastanza sicuro che l'utilizzo del campo del modulo sarà ciò che l'utente desidera fare. cioè. se sei Google.
L'espressione jQuery più completa che ho trovato funzionante è (tramite l'aiuto di qui )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Se stai utilizzando il framework JavaScript Prototype , puoi utilizzare il metodo focusFirstElement :
Form.focusFirstElement(document.forms[0]);
C'è un articolo qui che potrebbe essere utile: Imposta lo stato attivo su Primo input sulla pagina Web
Devi anche saltare tutti gli input nascosti.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whileun'istruzione?
L'inserimento di questo codice alla fine del bodytag metterà automaticamente a fuoco il primo elemento abilitato visibile e non nascosto sullo schermo. Gestirà la maggior parte dei casi che riesco a trovare con breve preavviso.
<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>
Ho provato molte delle risposte sopra e non funzionavano. Ho trovato questo su: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Grazie Kolodvor.
$("input:text:visible:first").focus();
Sto usando questo:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Questo ottiene il primo di qualsiasi input comune visibile, comprese le aree di testo e le caselle di selezione. Questo assicura anche che non siano nascosti, disabilitati o di sola lettura. consente anche un div di destinazione, che utilizzo nel mio software (cioè, il primo input all'interno di questo modulo).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
senza jquery, ad esempio con javascript normale:
document.querySelector('form input:not([type=hidden])').focus()
funziona su Safari ma non su Chrome 75 (aprile 2019)
Ciò include le aree di testo ed esclude i pulsanti di opzione
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
Dovresti essere in grado di utilizzare clientHeight invece di controllare l'attributo di visualizzazione, poiché un genitore potrebbe nascondere questo elemento:
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;
}
}
}
}
}
Senza librerie di terze parti, usa qualcosa come
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Assicurati di considerare tutti i tag degli elementi del modulo, escludi quelli nascosti / disabilitati come in altre risposte e così via.