javascript - ejemplos - foco() no funciona en safari o cromo
keyup jquery (6)
Aunque no pude encontrar esto expresamente en ningún lado, .focus() solo funciona en elementos de entrada y enlaces. Tampoco es compatible correctamente en Chrome y Safari. He publicado una demostración aquí para mostrarles lo que quiero decir. También tenga en cuenta que focus() y focusin() (v1.4) tienen los mismos resultados.
Entonces, una vez determinado, intente cambiar su función a .click()
$("#recipientsDiv").click(function(e){ ... })
Tengo un div al que se le ha dado un índice de tabs, cuando el div está enfocado (clic o tabulado para) 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 da el foco de entrada pero no logra colocar el cursor dentro de la entrada (sé que lo hace porque los bordes del foco de safari / chrome aparecen)
¿Alguna sugerencia sobre lo que está pasando?
Tengo que arreglar el controlador de claves después de esto para que las teclas de flecha y la tecla de retroceso también funcionen, siéntete libre de ponerle timbre si quieres.
¡Gracias de antemano!
Aquí hay una muestra 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 acerca de esto es que la tabulación a través del div disparará la función div.focus () y dará el enfoque de entrada correctamente ... es solo el clic que falla. Intenté poner una función .click () en el div para hacer lo mismo que el enfoque, pero no está funcionando.
De acuerdo con el estándar html 4.01 , tabindex no se aplica a divs.
Es probable que su problema no esté agregando un objeto DOM, que esté agregando HTML explícito a su página, y dudo que Safari esté actualizando el DOM entre bambalinas.
Trate de usar los métodos DOM reales como document.createElement() para agregar su input al DOM, como se describe en varios lugares (como here o here o here ), y luego ver si el problema de Safari persiste.
Dicho todo esto, la forma en que describe el problema que surge (por ejemplo, en los clics pero no en las pestañas) diría que el problema no será así ... así que ahora tengo curiosidad. (En cualquier caso, usar métodos DOM es realmente la forma correcta de agregar elementos, por lo que no es una mala idea hacerlo de todos modos).
Tengo la respuesta por mi cuenta ... puede 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 suficiente tiempo 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 más puede explicar esto o tiene una mejor respuesta, no dude en subir al escenario :-)
Tengo un problema similar con la última versión de Chrome, y descubrí que tenía en mi css-reset el 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 Chrome ni siquiera podía ingresar texto ... en Firefox era posible
establezca el índice de tabulación de ''toInput'' en 0 o superior, es un error conocido de Chrome: