messa a fuoco() non funziona in Safari o Chrome

Question

ho un div che è stato dato un tabindex, quando il div è focalizzata (clic o schede per) esegue le seguenti operazioni:

inserisce un input in se stessa, dà fuoco l'ingresso

questa grande opera in FF, IE e Opera

ma in Chome/Safari dà il focus ma non riesce a mettere in realtà il cursore all'interno l'ingresso (lo so che dà fuoco perché il appaiono i bordi di safari/chrome focus).

Qualche suggerimento su cosa sta succedendo?

Devo aggiustare il gestore di chiavi dopo di ciò in modo che anche i tasti freccia e i tasti backspace funzionino, sentitevi liberi di intervenire su quello se volete.

Grazie in anticipo!

Ecco un esempio del codice:

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(); 
} 

Un'altra stranezza di questo è che tabulazione fino al div scatterà la funzione div.focus() e corretto dare il focus ... è solo il fare clic che non riesce. Ho provato a mettere una funzione .click() sul div per fare lo stesso del focus, ma non funziona.

Answer 1

ho avuto la risposta da solo ... potrebbe sembrare debole, e troppo semplice ... ma funziona.

Pronto per questa meraviglia ..?

Basta aggiungere un timer di 0 alla messa a fuoco ... per qualche motivo ti dà solo il tempo necessario per caricare completamente l'input nel 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); 
} 

Se qualcun altro può spiegare ulteriormente questo o ha una risposta migliore non esitate a salire sul palco :-)

Answer 2

in base allo html 4.01 standard, il tabindex non si applica ai div.

Answer 3

Il tuo problema è probabile che tu non stia aggiungendo un oggetto DOM, stai aggiungendo HTML esplicito alla tua pagina - e dubito che Safari stia aggiornando il DOM dietro le quinte.

tenta di utilizzare i metodi DOM attuali come document.createElement() per aggiungere il vostro input al DOM, come descritto in un numero di posti (come here o here o here), e poi vedere se il problema persiste Safari.

Tutto ciò detto, il modo in cui descrivi il problema che si presenta - su clic ma non su schede, per esempio - sosterrebbe che il problema non sarà questo ... quindi ora sono curioso. (In ogni caso, usare i metodi DOM è davvero il modo giusto per aggiungere elementi, quindi non è una cattiva idea farlo comunque).

Answer 4

Sebbene non sia stato possibile trovare questo specificamente indicato ovunque, .focus() funziona solo sugli elementi di input e collegamenti. Inoltre, non è supportato correttamente in Chrome e Safari. Ho pubblicato un demo here per mostrarti cosa intendo. Si noti inoltre che focus() e focusin() (v1.4) hanno gli stessi risultati.

In modo che è determinato, provare a modificare le funzioni di .click()

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

Answer 5

ho avuto un problema simile con l'ultima release di cromo, e ho scoperto che ho era nel mio css-resettare il seguente

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

il risultato è stato che in cromo potrei non il testo anche in ingresso ... in Firefox era possibile

Answer 6

s et il tabIndex di 'toInput' per 0 o superiore, è un noto bug Chrome:

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