focus() funktioniert nicht in Safari oder Chrom

Question

Ich habe ein div, die einen tabindex gegeben wurde, wenn das div konzentriert (Klick oder Registerkarten zu) geschieht Folgendes:

fügt einen Eingang in sich selbst, konzentrieren sich die Eingangs

gibt

funktioniert dies sehr gut in FF, IE und Opera

aber in Chome/Safari gibt es den Eingabefokus, aber nicht tatsächlich in den Eingang um den Cursor zu setzen (ich weiß, es ist es, weil der Fokus gibt Safari/Chrom Fokus Grenzen erscheinen).

Irgendwelche Vorschläge, was vor sich geht?

Ich muss den Key-Handler nach diesem zu beheben, so dass die Pfeiltasten und die Rücktaste funktionieren, fühlen Sie sich frei, um darauf zu schlagen, wenn Sie möchten.

Vielen Dank im Voraus!

Hier ist ein Beispiel für den Code:

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

Eine weitere Kuriosität darüber, dass an den div Tabbing durch ist die div.focus() Funktion Feuer und korrekt den Eingabefokus geben ... es ist nur die Klicken Sie auf das fehlschlägt. Ich habe versucht, eine .click() -Funktion auf das Div, um das gleiche wie den Fokus zu tun, aber es funktioniert nicht.

Answer 1

Wechsel bekam ich die Antwort auf meine ... es könnte schwach erscheinen, und zu einfach ... aber es funktioniert.

Bereit für diese Ehrfurcht ..?

Fügen Sie einfach einen Timer von 0 zum Fokus hinzu ... aus irgendeinem Grund gibt es nur genug Zeit, um die Eingabe vollständig in das DOM zu laden.

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

Wenn jemand anderes kann dies weiter erklären, oder hat eine bessere Antwort wenden Sie sich bitte auf die Bühne nehmen :-)

Answer 2

entsprechend der html 4.01 standard gilt tabindex nicht für divs.

Answer 3

Ihr Problem besteht wahrscheinlich darin, dass Sie kein DOM-Objekt anhängen, sondern expliziten HTML-Code an Ihre Seite anhängen - und ich bezweifle, dass Safari das DOM hinter den Kulissen aktualisiert.

Versuchen Sie, die tatsächliche DOM-Methoden wie document.createElement() zu benutzen, um Ihre input auf das DOM anhängen, wie es in einer Reihe von Orten (wie here oder here oder here) beschrieben ist, und dann sehen, ob das Safari Problem weiterhin besteht.

All das, die Art und Weise, dass Sie das Problem beschreiben - auf Klicks, aber nicht zum Beispiel, würde argumentieren, dass das Problem nicht das sein wird ... so jetzt bin ich neugierig. (In jedem Fall ist die Verwendung von DOM-Methoden wirklich der richtige Weg, um Elemente hinzuzufügen, also ist es keine schlechte Idee, dies trotzdem zu tun.)

Answer 4

Obwohl ich dies nirgendwo ausdrücklich finden konnte, funktioniert .focus() nur bei Eingabeelementen und Links. Es wird auch nicht korrekt in Chrome und Safari unterstützt. Ich habe eine demo here gepostet, um dir zu zeigen, was ich meine. Beachten Sie auch, dass und focusin() (v1.4) die gleichen Ergebnisse haben. So

, dass bestimmt wird, versuchen Sie Ihre Funktion .click()

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

Answer 5

ich mit der neuesten Chrom-Release ein ähnliches Problem bekam, und ich fand heraus, dass ich in meinem hatte CSS-Reset die folgende

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

das Ergebnis war in Chrom, dass ich Eingabetext konnte nicht einmal ... in firefox es möglich war,

Answer 6

s et die tabIndex von 'toInput' 0 oder höher, es ist ein bekannter Chrome Bug:

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