javascript - not - jQuery focus() a veces no funciona en IE8
jquery focus out (7)
Estoy desarrollando webapp usando jQuery. Tengo una funcionalidad que agrega una nueva fila de 3 campos de entrada. Después de crear estos elementos DOM, quiero enfocar uno de los campos de entrada. Lo estoy haciendo llamando a la función jQuery focus () en el campo de entrada necesario.
El problema es que llamar a focus () funciona bien en IE6 y FF3.5, pero no funciona en IE8.
Estaba tratando de hacer un ejemplo simple de este problema para mostrarlo aquí, pero con una versión reducida de enfoque de código () funciona bien. Entonces, supongo que DOM aún no está listo cuando llamo focus () en IE8. Para esto intenté llamar a setTimeout (''myFocus ()'', 400). Tuve éxito y, en algunos casos, el enfoque estaba realmente funcionando, pero aún no siempre. Al azar no enfoca mi campo de entrada.
La pregunta es: ¿Alguien ha enfrentado problemas similares y alguien tiene alguna idea de cómo solucionarlo? Usar setTimeout se siente como una solución muy fea.
Tnx por adelantado
Editado: 26.08.2009
Se logró reproducir en un ejemplo simple. Aquí está el código HTML + JS que reproduce este error en IE8.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function performChanged() {
formChanged = true;
}
function handleChange() {
var parentDiv = $(''#container'');
newValue = $(html).html();
parentDiv.html(newValue);
$(".sel1",parentDiv).bind(''change'',handleChange);
//alert(''Uncomment this and after alert focus will be on input'');
$("input.cv_values",parentDiv).focus();
}
$(document).ready(function() {
$(''.trackChange'').bind(''change'', handleChange);
});
var html = ''<div class=/"div1/">/n<select class=/"sel1/" id=/"sel1/" name=/"sel1/"><option value=/"/"><//option>/n<option value=/"11/">Select me to see problem<//option>/n<//select>/n/n/n<input class=/"cv_values/" id=/"sel3/" name=/"sel3/" size=/"30/" type=/"text/" value=/"/" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>'';
</script>
</head>
<body>
<select class="trackChange" onchange=''performChanged();''>
<option value=""></option>
<option value="1" >Select me to generate new inputs</option>
</select>
<div id="container"></div>
</body>
Para reproducir: 1) seleccione el valor del primer menú desplegable. Verá que la entrada por primera vez funciona 2) seleccione el valor del segundo menú desplegable. Verás que se reproduce el error.
Luego, en el código, puede comentar la línea donde se muestra la alerta JS (). Lo extraño es que si hay esta alerta (), después de que el enfoque funcione bien.
Espero que esto ayude a entender dónde está mi problema.
PS Necesito que mi aplicación funcione de esta manera: está regenerando esas entradas después de seleccionar un valor del menú desplegable. Este es un ejemplo simplificado de mi aplicación;).
Esta es la mejor solución por el momento para enfocar:
$ (''. elt''). fadeIn (200, function () {$ (''. elt''). focus ();});
Esta es una pregunta antigua, pero está en la parte superior de la búsqueda, por lo que quería actualizarla.
No sé si alguna vez hubo un momento en que se solucionó, pero hoy me encontré con este problema nuevamente en IE11, utilizando jquery-2.1.3. Descubrí que encerrar la llamada de enfoque en un setTimeout, como lo establece Ponny arriba, funcionó mejor para mí.
Necesitaba aumentar el tiempo de espera en algunos casos para que funcionara.
Extrañamente tuve el mismo problema y lo resolví usando un simple javascript como el siguiente:
document.getElementById(''friend_name'').focus();
Usando jQuery equivalente $(''#friend_name'').focus(); no funcionó en IE8: - /
Junto con la solución de Kazys, encontré esto para solucionar todos mis problemas (usando los archivos IE8 y .HTA):
$("elem").blur();
$("elem").focus().focus();
No tengo idea de por qué, pero de alguna manera llamar al foco dos veces ayuda a IE a lo largo.
EDITAR: He encontrado que llamar a .show () y .select () también puede ayudar.
Tuve un problema similar con mi aplicación, pero no puedo reproducir el problema de enfoque con su código. Mi problema fue ligeramente diferente, ya que mi página tenía un hash de enlace que hacía que IE no diera a mi elemento el enfoque.
De todos modos, para solucionar el problema agregué un tiempo de espera:
setTimeout(function () {
$(''.my-thing'').focus();
}, 100);
No es perceptible para un usuario, pero le da a IE un momento para respirar.
Tuvo un problema similar con IE8. Quería enfocar la entrada en el diálogo cuando se abre. Se utiliza autoOpen = false. Notó que el enfoque no funciona solo para el primer elemento enfocable en el diálogo. Intenté setTimeout pero funcionó solo algunas veces. El elemento borroso antes de enfocar me ayudó.
$(''#dialog'').find(''#name'').blur();
$(''#dialog'').find(''#name'').focus();
Ya que no has publicado ningún código estás usando:
$(document).ready(function(){
//code here
});
Esto hará que se ejecute javascript después de cargar el html.
Y deberías usar eventos en vivo también. Cuando agregue entradas al dominio, el enfoque se vinculará automáticamente.
$("p").live("focus", function(){
alert( $(this).text() );
});
Esto significa que cada p que se cree tendrá un enfoque vinculado a él.