¿Cómo se puede centrar el cursor en un cuadro de entrada específico en la carga de la página?Enfoque Cuadro de entrada En carga
¿Es posible retener también el valor de texto inicial y colocar el cursor al final de la entrada?
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />
Hay dos partes para su pregunta.
1) ¿Cómo enfocar una entrada en la carga de la página?
Puede simplemente agregar el atributo autofocus a la entrada.
<input id="myinputbox" type="text" autofocus>
Sin embargo, esto puede no ser compatible con todos los navegadores, por lo que podemos usar javascript.
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
2) ¿Cómo poner el cursor al final del texto de entrada?
Aquí hay una solución que no es jQuery con algún código prestado de another SO answer.
function placeCursorAtEnd() {
if (this.setSelectionRange) {
// Double the length because Opera is inconsistent about
// whether a carriage return is one character or two.
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
// This might work for browsers without setSelectionRange support.
this.value = this.value;
}
if (this.nodeName === "TEXTAREA") {
// This will scroll a textarea to the bottom if needed
this.scrollTop = 999999;
}
};
window.onload = function() {
var input = document.getElementById("myinputbox");
if (obj.addEventListener) {
obj.addEventListener("focus", placeCursorAtEnd, false);
} else if (obj.attachEvent) {
obj.attachEvent('onfocus', placeCursorAtEnd);
}
input.focus();
}
Aquí hay un ejemplo de cómo lograría esto con jQuery.
<input type="text" autofocus>
<script>
$(function() {
$("[autofocus]").on("focus", function() {
if (this.setSelectionRange) {
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
this.value = this.value;
}
this.scrollTop = 999999;
}).focus();
});
</script>
Los fragmentos de código:
function focusOnMyInputBox(){
document.getElementById("myinputbox").focus();
}
<body onLoad="focusOnMyInputBox()")>
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text" />
Una forma de hacer esto portátil utiliza una función personalizada (para manejar las diferencias navegador) como this one.
A continuación, configurar un controlador para el onload al final de su etiqueta <body>, como jessegavin escribió:
window.onload = function() {
document.getElementById("myinputbox").focus();
}
Sólo una cabeza - ahora usted puede hacer esto con HTML5 sin JavaScript para navegadores que lo soportan:
<input type="text" autofocus>
es probable que desee comenzar con esto y construir sobre ella con JavaScript para proporcionar una reserva para navegadores antiguos.
Es bueno saber eso, ¿esto ya mueve el cursor a la última posición en el campo de entrada? –
No creo que @ Codex73 intente lograr lo que hace el atributo de marcador de posición en HTML5. Parece que quiere que el cursor se posicione automáticamente al final de cualquier valor que esté actualmente en la entrada. – jessegavin
Tiene razón, esta no es una solución completa. Pero esto resuelve un par de cosas (onload autofocus y placeholder text). –
$(document).ready(function() {
$('#id').focus();
});
Esto requiere jQuery. –
Sí, necesitas incluir jQuery libs :) – Nasruddin
Esto es lo que me da buenos resultados:
<form name="f" action="/search">
<input name="q" onfocus="fff=1" />
</form>
FFF será una variable global cuyo nombre es absolutamente irrelevante y que tienen como objetivo será detener el proceso de carga genérica para forzar el foco en esa entrada .
<body onload="if(!this.fff)document.f.q.focus();">
<!-- ... the rest of the page ... -->
</body>
Desde: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html
Si no se puede agregar a la etiqueta BODY por alguna razón, se puede añadir esto después de la Forma:
<SCRIPT type="text/javascript">
document.yourFormName.yourFieldName.focus();
</SCRIPT>
trabajando muy bien ...
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
Probar:
Javascript puro:
[elem][n].style.visibility='visible';
[elem][n].focus();
Jquery:
[elem].filter(':visible').focus();
El primer bloque de código sugirió realidad pla También coloca el cursor al final del valor existente, funciona bien. Aprecio tu ayuda. – Codex73