javascript - segura - ¿Cómo se configura automáticamente el foco en un cuadro de texto cuando se carga una página web?
no puedo abrir algunas paginas de internet (12)
¿Cómo se configura 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?
Como consejo general, recomendaría no robar el foco de la barra de direcciones. ( Jeff ya habló de eso. )
La página web puede tardar un poco en cargarse, lo que significa que su cambio de enfoque puede ocurrir mucho tiempo después de que el usuario ingrese la URL 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 usted controla la red (red local) o si el cambio de enfoque es para resolver un problema de usabilidad importante, olvide todo lo que acabo de decir :)
Cualquier libro de Javascript te dirá que no pongas controladores en el elemento del cuerpo así.
Si estás usando jquery:
$(function() {
$("#Box1").focus();
});
o prototipo:
Event.observe(window, ''load'', function() {
$("Box1").focus();
});
o simple javascript:
window.onload = function() {
document.getElementById("Box1").focus();
};
aunque tenga en cuenta que esto reemplazará a otros controladores de carga, busque addLoadEvent () en google para obtener una forma segura de agregar controladores de carga en lugar de reemplazarlos.
En HTML, hay un atributo de autofocus para todos los campos de formulario. Hay un buen tutorial sobre esto en Dive Into HTML 5 . Desafortunadamente, actualmente no es supported con versiones de IE menores que 10.
Para usar el atributo HTML 5 y recurrir a una opción JS:
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
No se requieren manejadores de jQuery, onload o event, porque el JS está debajo del elemento HTML.
Editar: otra ventaja es que funciona con JavaScript desactivado en algunos navegadores y puede eliminar el JavaScript cuando no desea admitir navegadores más antiguos.
Editar 2: Firefox 4 ahora es compatible con el atributo de autofocus , simplemente dejando IE sin soporte.
En mi humilde opinión, la forma más "limpia" de seleccionar el primer campo de texto visible y habilitado en la página es usar jQuery y hacer algo como esto:
$(document).ready(function() {
$(''input:text[value=""]:visible:enabled:first'').focus();
});
Espero que ayude...
Gracias...
Necesitas usar javascript:
<BODY onLoad="document.getElementById(''myButton'').focus();">
@Ben observa que no debe agregar manejadores de eventos como este. Si bien esa es otra pregunta, recomienda que use 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 haga una llamada a addLoadEvent en su página y haga referencia a una función para establecer el foco en el cuadro de texto deseado.
Puedes hacerlo fácilmente usando jquery de esta manera:
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
llamando a esta función en $(document).ready() .
Significa que esta función se ejecutará cuando el DOM esté listo.
Para obtener más información acerca de la función READY, consulte: http://api.jquery.com/ready/
Si está utilizando ASP.NET, puede usar
yourControlName.Focus()
en el código en el servidor, que agregará el JavaScript apropiado en 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.
Tuve un problema ligeramente diferente. Quería el autofocus , pero quería que el texto del placeholder permaneciera en todos los navegadores. Algunos navegadores ocultan el texto del placeholder tan pronto como el campo se enfoca, algunos lo conservan. 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 el autofocus .
Así que escuché la primera clave escrita contra la etiqueta del cuerpo y redirigí esa clave al campo de entrada del objetivo. 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);
Usa el siguiente código Para mí está funcionando
jQuery("[id$=''hfSpecialty_ids'']").focus()
Uso de HTML simple 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 usan .net framework y asp.net 2.0 o superior, es 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 de stock proporcionada con Visual Studio) puede usar:
DO#
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 hacer guiones bajos para renderizar sin escalar).
Espero que esto ayude.
<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>