Comportement d'entrée de fichier dans IE

J'ai remarqué une différence de comportement entre le chrome et l'IE de la manipulation des clics d'entrée de fichier.Comportement d'entrée de fichier dans IE

Exemple jsFiddle here. Dans Chrome, le fait de cliquer n'importe où sur l'entrée (texte ou bit de bouton) déclenche la boîte de dialogue de fichier.

Dans IE (test sur 7), vous devez cliquer sur le bouton actuel, pas sur le bit de texte.

Le problème est que j'utilise une entrée de fichier transparente au-dessus d'une zone de texte normale. Cliquer sur la zone de texte devrait ouvrir la boîte de dialogue. Dans Chrome, cela fonctionne correctement, car la taille totale de l'entrée est la même que celle de ma zone de texte.

Dans IE, cela ne fonctionne pas correctement car l'utilisateur doit cliquer sur la partie réelle du bouton de l'entrée de fichier transparente.

Des idées pour résoudre ce problème?

Merci

Source

2010-10-12 fearofawhackplanet

Awwww ... n'est-ce pas une solution de contournement vraiment hacky qui pourrait être désactivée dans les prochaines générations de navigateurs pour des raisons de sécurité? Aucune chance d'utiliser autre chose, comme un uploader basé sur Flash stylable? –

non, aucune chance d'utiliser le flash. Si elle est désactivée dans les navigateurs à venir, il ne faudra que 10 minutes pour la modifier. Jusque-là, je veux au moins essayer de donner à mes utilisateurs une interface décente. – fearofawhackplanet

Vous devez trouver un moyen de déclencher un événement de clic sur la zone de saisie file ..

peut-être ajouter un gestionnaire de clic sur la zone de texte sous-jacent qui délivre le clic événement dans la zone de fichier.

exemple: http://jsfiddle.net/MqbrV/

Il ne fonctionne pas dans Firefox (mais l'action par défaut devrait être assez) et Opera (là où il ne fonctionne).

Source

2010-10-12 11:53:04

@Tim, merci pour l'édition .. –

ce n'était pas exactement ce que je cherchais mais m'a donné l'indice dont j'avais besoin, merci. – fearofawhackplanet

Jetez un oeil à la façon dont ces gars-là ont fait: http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

La stratégie est la même, superposer une entrée de fichier personnalisé conçu sur un standard et d'obtenir l'utilisateur d'interagir avec le un standard.

Ils ont écrit un petit hack pour prendre en charge le clic pour IE et Opera, en utilisant jQuery pour lier explicitement un événement click.

Voir: http://dwpe.googlecode.com/svn/trunk/fileinput/js/jQuery.fileinput.js (ligne 52)

Source

2010-10-12 11:47:06

effectivement, le code sur la ligne 52 est pour déclencher l'événement de changement dans l'entrée de fichier, il semble que IE ne gère pas cela correctement non plus. Votre message m'a donc été très utile, car je devais aussi traiter de cette question. Si vous regardez plus près du bas de ce fichier, vous voyez qu'ils traitent la manipulation du clic en déplaçant réellement l'entrée de fichier onmousemove dans le faux contrôle, de sorte que le clic se produit toujours au bon endroit. – fearofawhackplanet

Comportement d'entrée de fichier dans IE

Répondre

Questions connexes