¿Cómo se establece automáticamente el enfoque en un cuadro de texto cuando se carga una página web?¿Cómo se establece automáticamente el foco en un cuadro de texto cuando se carga una página web?
¿Hay una etiqueta HTML para hacerlo o tiene que hacerse a través de Javascript?
Cualquier Javascript libro le dirá no poner los manipuladores en el elemento del cuerpo de esa manera.
I'f estás usando jQuery:
$(function() {
$("#Box1").focus();
});
o prototipo:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
o Javascript claro:
window.onload = function() {
document.getElementById("Box1").focus();
};
pesar de tener en cuenta que esto va a sustituir a otra en controladores de carga, busque addLoadEvent() en google para una forma segura de anexar controladores de carga en lugar de replac En g.
¿Por qué no poner controladores en el elemento del cuerpo? ¿Alguna referencia? Gracias –
Porque es mucho más limpio separar Javascript del HTML. Debería agregar comportamiento de scripts a los elementos visuales en su HTML –
@BenScheirman y 5 años más tarde tenemos JSX –
Es necesario utilizar javascript:
<BODY onLoad="document.getElementById('myButton').focus();">
@Ben señala que no debe agregar controladores de eventos como este. Mientras que eso es otra cuestión, se recomienda que utilice esta función:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
y luego poner una llamada a addLoadEvent en su página y referencia a una función de los conjuntos de enfoque para el cuadro de texto que se desee.
<html>
<head>
<script language="javascript" type="text/javascript">
function SetFocus(InputID)
{
document.getElementById(InputID).focus();
}
</script>
</head>
<body onload="SetFocus('Box2')">
<input id="Box1" size="30" /><br/>
<input id="Box2" size="30" />
</body>
</html>
Demasiados '" 'Necesitas:'
' – dave1010el uso de HTML con sabor de vainilla y JavaScript
<input type='text' id='txtMyInputBox' />
<script language='javascript' type='text/javascript'>
function SetFocus()
{
// safety check, make sure its a post 1999 browser
if (!document.getElementById)
{
return;
}
var txtMyInputBoxElement = document.getElementById("txtMyInputBox");
if (txtMyInputBoxElement != null)
{
txtMyInputBoxElement.focus();
}
}
SetFocus();
</script>
Para aquellos que por ahí utilizando el marco .NET y asp.net 2,0 o por encima de, su trivial. Si está utilizando versiones anteriores del marco, necesitará escribir algún javascript similar al anterior.
En su controlador onLoad (generalmente Page_Load si está utilizando la plantilla de página stock suministrada con Visual Studio) que puede utilizar:
C#
protected void PageLoad(object sender, EventArgs e)
{
Page.SetFocus(txtMyInputBox);
}
VB.NET
Protected Sub PageLoad(sender as Object, e as EventArgs)
Page.SetFocus(txtMyInputBox)
End Sub
(* Nota: eliminé el carácter de guión bajo del nombre de la función que generalmente es Page_Load, ya que en un bloque de código se negó a procesar correctamente! No pude ver en la documentación de marcado cómo para obtener guiones bajos para hacer sin guardar.)
Espero que esto ayude.
Como consejo general, recomendaría no robar el foco de la barra de direcciones. (Jeff already talked about that.)
La página web puede demorar un tiempo en cargarse, lo que significa que su cambio de enfoque puede ocurrir mucho tiempo después de que el usuario ingrese la URL del pae.Entonces él podría haber cambiado de opinión y volver a escribir en la url mientras cargará su página y robará el foco para ponerlo en su cuadro de texto.
Esa es la única razón que me hizo eliminar Google como mi página de inicio.
Por supuesto, si el control de la red (red local) o si el cambio de enfoque es resolver un problema importante la facilidad de uso, olvida todo lo que acaba de decir :)
Estoy de acuerdo con usted en algunos casos. Sin embargo, en mi caso específico, estoy apareciendo un pequeño div que solo un cuadro de entrada. Se supone que el usuario debe ingresar algo y cerrar inmediatamente el div el enfoque es práctico. –
En HTML hay un autofocus attribute a todos los campos del formulario. Hay un buen tutorial en Dive Into HTML 5. Por desgracia, es actualmente no supported por versiones decir, menos de 10.
Para utilizar el atributo HTML 5 y caer de nuevo a una opción JS:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
Sin jQuery, proceso de carga o se requieren controladores de eventos, debido a que la JS está debajo del elemento HTML.
Editar: otra ventaja es que funciona con JavaScript apagado en algunos navegadores y se puede quitar el JavaScript cuando no se quiere apoyar a los navegadores antiguos.
Edición 2: Firefox 4 es ahora compatible con el atributo autofocus, acaba de salir de IE sin apoyo.
¿Qué pasa con el 'autofocus =" aufofocus "'? Todos los enlaces que proporcionaste solo dicen agregar el atributo: 'autofocus'. – Gerrat
Ba ck en los días de XHTML y HTML4 era común hacer 'attribute =" value "' para atributos booleanos. HTML5 llegó junto con la "sintaxis de atributo vacío" y descartamos la redundancia. Ahora podemos hacer '' – dave1010
en mi humilde opinión, la forma 'limpia' para seleccionar el campo En primer lugar, visible, activada texto en la página, es el uso de jQuery y hacer algo como esto:
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});
Espero que ayude ...
Gracias ...
puede hacerlo fácilmente mediante el uso de jQuery de esta manera:
<script type="text/javascript">
$(document).ready(function() {
$("#myTextBoxId").focus();
});
</script>
llamando a esta función en $(document).ready().
Significa esta función se ejecutará cuando el DOM está listo.
Para obtener más información acerca de la función READY, se refieren a: http://api.jquery.com/ready/
usar el siguiente código. Para mí está funcionando
jQuery("[id$='hfSpecialty_ids']").focus()
Tuve un problema ligeramente diferente. Quería autofocus, pero, quería que el texto placeholder a permanecer, a través del navegador. Algunos navegadores ocultan el texto placeholder tan pronto como el campo se enfoca, algunos lo mantienen. Tenía que conseguir marcadores de posición que se mantuvieran en el navegador, lo que tenía efectos secundarios extraños, o dejar de usar autofocus.
Así que escuché por primera clave escrito en contra de la etiqueta del cuerpo, y se redirige esa clave en el campo de entrada de destino. Luego todos los controladores de eventos involucrados son asesinados para mantener las cosas limpias.
var urlInput = $('#Url');
function bodyFirstKey(ev) {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
if (ev.target == document.body) {
urlInput.focus();
if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
urlInput.val(ev.key);
return false;
}
}
};
function urlInputFirstFocus() {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
};
$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);
Si está utilizando ASP.NET luego puede usar
yourControlName.Focus()
en el código en el servidor, que agregará el JavaScript adecuado a la página.
Otros marcos del lado del servidor pueden tener un método equivalente.
Simplemente escriba autofocus en el campo de texto. Esto es simple y funciona así:
<input name="abc" autofocus></input>
Espero que esto ayude.
esto es bueno pero el problema es que si tienes pasos con estilo deslizante, eso no sería útil especialmente si el tipo de entrada está en el paso 3 o 4 por ejemplo –
http://blog.jerodsanto.net/2009/05/jquery-set-mouse-focus-on-page-load/ – Arjun