enfoque() no funciona en Safari o Chrome

Question

tengo un div que se ha dado un índice de tabulación, cuando el div se centra (clic o pestañas a) se hace lo siguiente:

inserta una entrada en sí mismo, da el foco de entrada

esto funciona muy bien en FF, IE y Opera

pero en Chome/Safari le da el foco de entrada, pero no consigue poner realmente el cursor dentro de la entrada (ya sé que le transfiere el foco porque el aparecen los bordes del enfoque de safari/cromo).

¿Alguna sugerencia sobre qué está pasando?

Tengo que arreglar el manejador de teclas después de esto para que las teclas de flecha y las teclas de retroceso funcionen también, siéntete libre de hablar sobre eso si lo deseas.

¡Gracias de antemano!

Aquí está un ejemplo del código:

var recipientDomElem = $("#recipientsDiv"); 
recipientDomElem[0].tabIndex = 0; 
$("#recipientsDiv").focus(function(e){ 
var code = (e.keyCode ? e.keyCode : e.which); 
window.clearTimeout(statusTimer); 
recipientDivHandler(code, null); 
}); 


function recipientDivHandler(code, element){ 
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />'); 
$("#toInput").focus(); 
} 

Otra rareza de esto es que tabulación a través de la div se disparará la función div.focus() y dar correctamente el foco de entrada ... Es sólo el haga clic en eso falla. Traté de poner una función .click() en el div para hacer lo mismo que el foco, pero no está funcionando.

Answer 1

me dio la respuesta en mi propia ... podría parecer débil y demasiado simple ... pero funciona.

¿Listo para esta maravilla ...?

Simplemente agregue un temporizador de 0 al foco ... por alguna razón solo le da tiempo suficiente para cargar completamente la entrada en el DOM.

function recipientDivHandler(code, element){ 
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />'); 
setTimeout(function(){$("#toInput").focus();},0); 
} 

Si alguien puede explicar con más detalle este o tiene una respuesta mejor no dude en tomar el escenario :-)

Answer 2

de acuerdo con html 4.01 standard, tabindex no se aplica a divs.

Answer 3

Es probable que su problema sea que no está agregando un objeto DOM, está agregando HTML explícito a su página, y dudo que Safari esté actualizando el DOM detrás de las escenas.

intenta utilizar los métodos DOM reales como document.createElement() para anexar su input al DOM, como se describe en una serie de lugares (como here o here o here), y luego ver si el problema persiste Safari.

Dicho todo esto, la forma en que describes el problema que surge - en clics pero no en pestañas, por ejemplo - argumentaría que el problema no será este ... así que ahora tengo curiosidad. (En cualquier caso, el uso de métodos DOM es realmente la manera correcta de añadir elementos, así que no es una mala idea hacerlo de todos modos.)

Answer 4

Aunque no pude encontrar este indique específicamente en cualquier lugar, .focus() solo funciona con los elementos de entrada y enlaces. Tampoco se admite correctamente en Chrome y Safari. Publiqué un demo here para mostrarle lo que quiero decir. También tenga en cuenta que focus() y focusin() (v1.4) tienen los mismos resultados.

Así que está determinado, trate de cambiar su función a .click()

$("#recipientsDiv").click(function(e){ ... }) 

Answer 5

Tengo un problema similar con la última versión de cromo, y descubrí que me había en mi css-restablecer la siguiente

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 

el resultado fue que en cromo ni siquiera podía texto de entrada ... en Firefox era posible

Answer 6

s et al tabIndex 'toInput' a 0 o superior, es un error conocido de Chrome:

http://code.google.com/p/chromium/issues/detail?id=467043