2009-08-25 24 views
15

Estoy desarrollando webapp utilizando 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.jQuery focus() a veces no funciona en IE8

problema es que llamando enfoque() funciona bien en IE6 y FF3.5, pero no funciona en IE8.

yo estaba tratando de hacer sencillo ejemplo de trabajo de este problema para mostrarlo aquí, pero con versión simplificada del enfoque de código() está funcionando bien. Así que supongo que DOM aún no está listo cuando llamo a focus() en IE8. Para esto intenté llamar a setTimeout ('myFocus()', 400). Tuve éxito y, en algunos casos, el enfoque realmente funcionaba, pero aún no siempre. Aleatoriamente no enfoca mi campo de entrada.

pregunta es: ¿se ha enfrentado a problemas similares a nadie y ¿Alguien tiene alguna idea de cómo solucionar esto? Usar setTimeout parece una solución muy fea.

TNX por adelantado

Editado: 26.08.2009

tuvo éxito al reproducir el ejemplo sencillo. 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) Valor de selección de la primera lista desplegable. Verá que la entrada de la primera vez está funcionando 2) seleccione el valor del segundo menú desplegable. Verás que el error se reproduce.

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() entonces después de que el enfoque está funcionando bien.

Espero que esto ayude a entender dónde está mi problema.

P.S. Necesito que mi aplicación funcione de esta manera: está regenerando esas entradas después de seleccionar el valor del menú desplegable. Este es un ejemplo simplificado de mi aplicación;).

+1

publique el fragmento de código. hace las cosas más fáciles. – krishna

+0

¿Ha intentado enfocarse en el evento de "carga" de la ventana (no en "DOMContentLoaded", a.k.a. - 'document.ready (...)' - one)? – kangax

Respuesta

6

extraño que tuve el mismo problema y lo resolvió usando javascript viejo y simple de este modo:

document.getElementById('friend_name').focus();

Usando jQuery equivalente $('#friend_name').focus(); no funcionaba en IE8: -/

+3

Esto es algo que quizás desee informar a la fundación jQuery. – Fresheyeball

1

Puesto que no se ha publicado ningún código está usando:

$(document).ready(function(){ 
    //code here 
}); 

Esto hará que Javascript carrera, después de cargar el html.

Y se debe usar live events también. Cuando agregue entradas al dom, automáticamente tendrá un enfoque enlazado a ellas.

$("p").live("focus", function(){ 
    alert($(this).text()); 
}); 

Esto significa que cada p que se crea tendrá un enfoque vinculado a ella.

+0

Quiero enfocar algunas entradas, pero no necesito estar al tanto de ese evento de enfoque. P.S. La versión estable actual de jQuery no es compatible con Live para el evento "focus". – oskarae

30

He tenido un problema similar con mi aplicación, pero no puedo reproducir el problema de enfoque con su código. Mi problema era un poco diferente en el sentido de que mi página tenía un hash de enlace que hacía que IE no le prestara atención a mi elemento.

todos modos, para evitar el problema que añade un tiempo de espera:

setTimeout(function() { 
    $('.my-thing').focus(); 
}, 100); 

no es perceptible por un usuario, pero le da es decir, un momento para respirar.

+0

¿Sabes por qué funciona esta solución? (Oh, gracias. Definitivamente funciona.) – jjnguy

+0

Estoy bastante interesado en por qué esto también funciona. – kukudas

+1

De algunos [documentación antigua] (http://javascript.gakaa.com/div-focus-4-0-5-.aspx): para dar un foco de cuadro de texto y preseleccionar todo el texto en el cuadro, use la secuencia de los métodos focus() y select() en el elemento. Si esta secuencia debe ocurrir después de que Windows cambia (como después de que se cierra un cuadro de diálogo de alerta), coloque los métodos en una función separada e invoque esta función a través del método setTimeout() siguiendo el método de alerta() para el diálogo. Esto permite a IE/Windows secuenciar la ejecución de la declaración correctamente. – davidchambers

4

Tuve un problema similar con IE8. Quería enfocar la entrada en el diálogo cuando se abre. AutoOpen usado = falso. Advirtió que el foco no funciona solo para el primer elemento enfocable en el diálogo. Intentó setTimeout pero solo funcionó algunas veces. El elemento borroso antes de enfocarme me ayudó.

$('#dialog').find('#name').blur(); 
$('#dialog').find('#name').focus(); 
+0

¡Gracias! Eso es exactamente lo que se debe hacer cuando la demora no ayuda. – Episodex

1

Este es la mejor solución para el momento de establecer el foco:

$ ('. elt'). f adeIn (200, función() {$ ('. elt'). focus();});

8

En conjunción con la solución de Kazys, me pareció que para solucionar todos mis problemas (usando archivos IE8 & HTA):

$("elem").blur(); 
$("elem").focus().focus(); 

no tengo ni idea de por qué, pero de alguna manera el enfoque de llamar dos veces ayuda a decir a lo largo .

EDIT: He encontrado que las llamadas .show() y .select() también pueden ayudar.

+0

'$ (" id "). Focus(). Focus();' funciona para mí, ¿hay alguna desventaja al usar esto? @Max Mayhem – bumbumpaw

+0

Nada de lo que sea consciente todavía. –

+0

¡Lo solucioné en IE11 también!Gracias :) – Krenor

0

Esta es una pregunta anterior, pero está arriba en la búsqueda, por eso quería actualizar.

No sé si alguna vez se solucionó el problema, pero hoy me encontré con este problema en IE11, usando jquery-2.1.3. Descubrí que envolver la llamada de enfoque en un setTimeout, como lo estableció Ponny arriba, funcionó mejor para mí.

Necesito aumentar el tiempo de espera en algunos casos, para que funcione.