web-dev-qa-db-fra.com

focus () ne fonctionne pas en safari ou chrome

J'ai un div qui a reçu un tabindex, quand le div est concentré (cliquer ou tabulé à) il fait ce qui suit:

insère une entrée en elle-même, donne le focus de l'entrée

cela fonctionne très bien dans FF, IE et Opera

mais dans Chome/Safari, il donne le focus de l’entrée mais ne parvient pas à placer le curseur dans l’entrée (je sais que cela lui donne le focus car les bordures du focus safari/chrome apparaissent).

Des suggestions quant à ce qui se passe?

Je dois réparer le gestionnaire de touches après cela pour que les touches fléchées et les touches Retour arrière fonctionnent également, n'hésitez pas à ajouter ce que vous voulez si vous le souhaitez.

Merci d'avance!

Voici un exemple du 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();
}

Une autre bizarrerie à ce propos est que la tabulation sur la div déclenche la fonction div.focus () et donne correctement le focus d'entrée ... c'est simplement le clic qui échoue. J'ai essayé de mettre une fonction .click () sur la div pour faire la même chose que le focus, mais cela ne fonctionne pas.

javascriptjqueryfocuskeystrokedynamic-forms
21
BinarySolo00100

J'ai moi-même la réponse ... cela peut sembler faible et trop simple ... mais ça marche.

Prêt pour cette génialité?

Ajoutez simplement une minuterie de 0 au focus ... pour une raison quelconque, cela lui laisse juste le temps de charger complètement l’entrée dans le 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 quelqu'un d'autre peut expliquer davantage ceci ou a une meilleure réponse, n'hésitez pas à prendre la parole :-)

24
BinarySolo00100

Bien que je ne puisse pas trouver cela spécifiquement indiqué nulle part, .focus() ne fonctionne que sur les éléments d'entrée et les liens. En outre, il n'est pas pris en charge correctement dans Chrome et Safari. J'ai posté une démo ici pour vous montrer ce que je veux dire. Notez également que focus() et focusin() (v1.4) ont les mêmes résultats.

Pour que cela soit déterminé, essayez de changer votre fonction en .click()

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

définissez le tabIndex de 'toInput' sur 0 ou plus, c'est un bogue connu de Chrome: 

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

3
xamiro

Votre problème est probablement que vous n’ajoutez pas d’objet DOM, vous ajoutez du code HTML explicite à votre page - et je doute que Safari mette à jour le DOM dans les coulisses.

Essayez d’utiliser les méthodes DOM telles que document.createElement() pour ajouter votre input au DOM, comme décrit à plusieurs endroits (tels que ici ou ici ou ici ), puis voyez si le problème de Safari persiste.

Cela dit, la façon dont vous décrivez le problème qui se pose - sur les clics mais pas sur les onglets, par exemple - indiquerait que le problème ne va pas être celui-ci ... alors, maintenant, je suis curieux. (En tout état de cause, l'utilisation de méthodes DOM est vraiment la bonne façon d'ajouter des éléments, ce n'est donc pas une mauvaise idée de le faire.)

2
delfuego

selon la norme html 4.01 , tabindex ne s'applique pas aux divs. 

1
user213154

J'ai eu un problème similaire avec la dernière version de chrome, et j'ai découvert que j'avais dans mon css-reset ce qui suit

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

le résultat était que, en chrome, je ne pouvais même pas entrer du texte ... dans Firefox, c'était possible

0
Master Yogurt