¿Existe una forma sencilla de establecer el foco (cursor de entrada) de una página web en el primer elemento de entrada (cuadro de texto, lista desplegable, ...) al cargar la página sin tener que saber la identificación del elemento?
Me gustaría implementarlo como un script común para todas mis páginas / formularios de mi aplicación web.
Respuestas:
También puede probar el método basado en jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Aunque esto no responde a la pregunta (requiere un script común), creo que podría ser útil para otros saber que HTML5 presenta el atributo 'autofocus'
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
Sumérjase en HTML5 tiene más información.
autofocussin valor spring:form. autofocus="autofocus"aunque funciona bien. Gracias, @Jacob.
document.forms[0].elements[0].focus();
Esto se puede refinar utilizando un bucle para, por ejemplo. no enfocar ciertos tipos de campo, campos deshabilitados, etc. Mejor puede ser agregar una clase = "enfoque automático" para el campo que en realidad no se centró falta, y un bucle sobre las formas [i] .elements [j] en busca de ese className.
De todos modos: normalmente no es una buena idea hacer esto en todas las páginas. Cuando enfoca una entrada, el usuario pierde la capacidad de, por ejemplo. desplazarse por la página desde el teclado. Si es inesperado, esto puede ser molesto, así que solo enfoque automáticamente cuando esté bastante seguro de que usar el campo del formulario será lo que el usuario quiere hacer. es decir. si eres Google.
La expresión jQuery más completa que encontré funcionando es (a través de la ayuda de aquí )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Si está utilizando el marco Prototype JavaScript, puede utilizar el método focusFirstElement :
Form.focusFirstElement(document.forms[0]);
Aquí hay un artículo que puede ser de utilidad: Establezca el enfoque en la primera entrada en la página web
También debe omitir las entradas ocultas.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whiledeclaración?
Al colocar este código al final de su bodyetiqueta, se enfocará el primer elemento habilitado visible, no oculto en la pantalla automáticamente. Manejará la mayoría de los casos que se me ocurran con poca antelación.
<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>
Probé muchas de las respuestas anteriores y no estaban funcionando. Encontré este en: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Gracias Kolodvor.
$("input:text:visible:first").focus();
Estoy usando esto:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Esto obtiene la primera entrada común visible, incluidas las áreas de texto y los cuadros de selección. Esto también asegura que no estén ocultos, deshabilitados o de solo lectura. también permite un div de destino, que utilizo en mi software (es decir, la primera entrada dentro de este formulario).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
Esto incluye áreas de texto y excluye botones de opción.
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if(first_input != undefined){ first_input.focus(); }
});
Debería poder usar clientHeight en lugar de verificar el atributo de visualización, ya que un padre podría estar ocultando este 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;
}
}
}
}
}
Sin bibliotecas de terceros, use algo como
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Asegúrese de considerar todas las etiquetas de los elementos del formulario, descarte las ocultas / deshabilitadas como en otras respuestas, etc.
sin jquery, por ejemplo, con javascript regular:
document.querySelector('form input:not([type=hidden])').focus()
funciona en Safari pero no en Chrome 75 (abril de 2019)