Comentario: Una función HTML simple ahora nos permite localizar automáticamente el enfoque de entrada en los elementos requeridos después de cargar la página. Se completa a través de un atributo llamado Autofocus. Los amigos interesados pueden aprender al respecto.
Texto original: html5 Attribut de enfoque automático
Fecha de lanzamiento original: 27 de agosto de 2012
Tiempo de traducción: 6 de agosto de 2013
HTML5 ha lanzado muchas cosas geniales para nosotros.
En el pasado, las tareas que queríamos completar con JavaScript y Flash, como verificación de formulario, indicaciones en blanco de cuadros de entrada (marcadores de posición de entrada), carga de archivos del cliente y descarga (nombres del archivo del lado del cliente) y reproducción de audio/video, ahora se puede completar con HTML básico. Otra característica simple de HTML es que ahora nos permite localizar automáticamente el enfoque de entrada en el elemento requerido después de cargar la página, y completarla a través de una propiedad llamada Autococus.
El código es tan simple como el siguiente:
<!- ¡Todos funcionan! ->
<Input AutoFocus = "Autofocus" />
<Botton Autofocus = "AutoFocus"> ¡Hola! </botón>
<TextAREA AutoFocus = "AutoFocus"> </extAREA>
Una vez configurado la propiedad AutOfocus, la entrada, TextAREA y los elementos de botón se seleccionarán automáticamente después de cargar la página (es decir, ganar enfoque). Probé otros elementos (como la etiqueta H1), tabindex = 0, pero la propiedad de enfoque automático no tiene ningún efecto en estos elementos en absoluto.
Este atributo es útil en el objetivo principal de obtener páginas cuyo objetivo principal es recopilar información, como la página de inicio de Google (el 99% de los casos se utilizan para la búsqueda) o los asistentes de instalación en línea (como el instalador de WordPress). Y lo más importante es que JavaScript no requiere participación.
El código de página completo es el siguiente:
<! Doctype html>
<html>
<Evista>
<title> HTML5 ATRIBUTO DE AUTOFOCUS PRUEBAS </title>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "original = http: //davidwalsh.name/autofocus">
</ablo>
<Body>
<!- En principio, solo se puede establecer uno de los siguientes tres elementos. Si se establecen múltiples elementos, el último elemento debe obtener el enfoque->
<!-
->
<div>
<Input AutoFocus = "Autofocus" />
<Botton Autofocus = "AutoFocus"> ¡Hola! </botón>
<TextAREA AutoFocus = "AutoFocus"> </extAREA>
</div>
</body>
</html>