Fork me on GitHub




« 1 (2)


blueteen
Re: Relooking "Input file" dans formulaire.
#11
Xoops accro
Inscrit: 15/07/2004 11:16
Messages: 4763
Salut,
Mais c'était juste le visuel de ton input qui ne plaisait pas ?
Du css n'aurait pas suffit ?

Posté le : 23/06/2013 13:15
Partager Twitter Partagez cette article sur GG+
Rapport Haut
slider84
Re: Relooking "Input file" dans formulaire.
#12
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Bonjour blueteen,

Je peux me tromper mais le truc avec le "input file" c'est que de mémoire c'est le seul élément de formulaire qui pour des raisons de sécurité est quasiment impossible à styler en css. Les résultats (et les succés) varient entre les différents navigateurs.
Je cherchais une solution qui passe partout.

Posté le : 23/06/2013 14:12

Open in new window

Xoops 2.5.7.2 - Debian 8.2 - Apache 2.4.10 - MySQL 5.5.47 - Php 5.6.17
Partager Twitter Partagez cette article sur GG+
Rapport Haut
blueteen
Re: Relooking "Input file" dans formulaire.
#13
Xoops accro
Inscrit: 15/07/2004 11:16
Messages: 4763
Ah ok !
Apparemment avec ce code là, ça fonctionne sur IE>6
http://www.supportduweb.com/scripts_t ... x-html-et-javascript.html

http://www.supportduweb.com/ftp/yboua ... e_css/input_file_css.html

Posté le : 23/06/2013 14:22
Partager Twitter Partagez cette article sur GG+
Rapport Haut
slider84
Re: Relooking "Input file" dans formulaire.
#14
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Enfin, le code final de la fonction render() qui fonctionne aussi avec IE.
function render()
    {
        return "<input type='hidden' name='MAX_FILE_SIZE' value='" . $this->getMaxFileSize() . "' /><input type='file' style='visibility:hidden;height:0px' name='" . $this->getName(). "' id='" . $this->getName(). "' title='" . $this->getTitle() . "'" .$this->getExtra() . " />
<input type='hidden' name='xoops_upload_file[]' id='xoops_upload_file[]' value='" . $this->getName() . "' />
<br><div class='block inline'><input type='text' readonly='readonly' name='" . $this->getName() ."_txt". "' title='" . $this->getTitle() . "' id='" . $this->getName() ."_txt". "' size='" . $this->getSize() . "' maxlength='" . $this->getMaxlength() . '" value="' . $this->getValue() . "' 
onclick='javascript:
document.getElementById("" . $this->getName(). "").click();
var inputElement = document.getElementById("" . $this->getName(). "");
if (inputElement.addEventListener){
  inputElement.addEventListener("change", handleFiles, false);
} else if (inputElement.attachEvent) {
  el.attachEvent("change", handleFiles);
}
function handleFiles() {
var fullPath = document.getElementById("" . $this->getName(). "").value;
document.getElementsByName("" . $this->getName() ."_txt". "")[0].value = fullPath;
}; '/>
<input type='" . $this->getType() . "' class='formButton' name='" . $this->getName() ."_btn". "'  id='" . $this->getName() ."_btn". "' value='" . _BROWSE . "' title='" . $this->getValue() . "'
onclick='javascript:
document.getElementById("" . $this->getName(). "").click();
var inputElement = document.getElementById("" . $this->getName(). "");
if (inputElement.addEventListener){
  inputElement.addEventListener("change", handleFiles, false);
} else if (inputElement.attachEvent) {
  el.attachEvent("change", handleFiles);
}
function handleFiles() {
var fullPath = document.getElementById("" . $this->getName(). "").value;
document.getElementsByName("" . $this->getName() ."_txt". "")[0].value = fullPath;
}; '/></div>";
    }
}

Il m'aura fait transpirer jusqu'au bout celui-là

Posté le : 23/06/2013 14:24
Partager Twitter Partagez cette article sur GG+
Rapport Haut
slider84
Re: Relooking "Input file" dans formulaire.
#15
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
@blueteen
Citation :
Apparemment avec ce code là, ça fonctionne sur IE>6
J'ai trouvé sur Mozilla.org....
if (inputElement.addEventListener){
  inputElement.addEventListener("change", handleFiles, false);
} else if (inputElement.attachEvent) {
  el.attachEvent("change", handleFiles);
}

Ton deuxième lien me plaît bien (mi css et mi javascript). Je vais me pencher dessus voir ce que ça peut donner.
Merci

Posté le : 23/06/2013 14:27
Partager Twitter Partagez cette article sur GG+
Rapport Haut
blueteen
Re: Relooking "Input file" dans formulaire.
#16
Xoops accro
Inscrit: 15/07/2004 11:16
Messages: 4763
Le 2ème lien est le rendu obtenu avec le code du premier lien
J'ai trouvé ça par hasard.

Posté le : 23/06/2013 20:12
Partager Twitter Partagez cette article sur GG+
Rapport Haut
slider84
Re: Relooking "Input file" dans formulaire.
#17
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
C'est vrai que c'est plus simple et qu'on peut mettre n'importe quelle image comme bouton mais cela ne correspond pas exactement à ce que je voulais faire. Je voulais un "input file" qui suive le style du thème et qui se comporte exactement comme l'original (tu peux cliquer sur la zone texte ou sur le bouton, ça marche dans les deux cas). Mais le principe est le même, cacher le "input file" d'origine qui ne peut pas être stylé.
Après, c'est une question de goûts mais quant tu passes des heures (et même beaucoup plus) à peaufiner un formulaire, c'est un peu dommage de se retrouver avec ce truc "rétro" en plein milieu

Posté le : 23/06/2013 21:26
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
« 1 (2)



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

31 Personne(s) en ligne (27 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 31 | Plus ...