Problème avec mes formulaires
ThomasLBA Le 30 avril 2018 à 13:33 (Édité le 25 janvier 2019 à 17:54)
Je suis en plein développement de mon site Les Billets Actu et j’ai donc suivi un tuto pour faire des input en utilisant le material design, une animation se déclenche donc quand l’utilisateur clique sur le champ et le label s’anime, je gère le système avec jQuery et tout fonctionne.Le problème est que si un champ est prérempli par le naviguateur au chargement de la page, l’animation ne se déclenche pas car évidemment l’utilisateur n’a pas cliqué donc le JS ne peut pas ajouter les classes qui me permettent de détecter si un champ est vide ou non. Bref, j’aimerais savoir s’il existe une pseudo classe CSS qui détecte quand un champ est prérempli par le naviguateur.
Voici un des formulaires présent sur mon site : https://les-billets-actu.cf/register/
Petites illustrations pour que vous compreniez mieux :
Voici ma page quand je la charge :
[img width=100%]https://les-billets-actu.cf/inc/images/spe/Capture.PNG[/img]
Et voici se que je voudrais :
[img width=100%]https://les-billets-actu.cf/inc/images/spe/Capture2.PNG[/img]
PS : Le site est encore en développement donc il est possible qu’il y ai des eléments non terminés et aussi : Il est probable que le SSL ne fonctionne pas convenablement !
ThomasLBA Le 2 juin 2018 à 10:32 (Édité le 2 juin 2018 à 10:35)
<form autocomplete="on|off">
...
</form>
Profil introuvable Le 8 mai 2018 à 02:25
Je suis aller visiter ton site et tes formulaires ont l'air de fonctionner car je n'ai pas vu de problèmes... Peut-être que si tu fais des captures d'écran, je/nous comprendrais/ont le problème...
Au passage, merci de m'avoir fait découvrir Browser Update, je cherchais exactement cela pour informer les visiteurs de mettre à jour leur navigateur (mais bien sûr ils vont râler comme d'hab 😴) (j'avais essayer de faire moi-même ma popup en CSS mais les vieux navigateurs ne l'affichait pas correctement et c'était horrible à voir, ce service m'a fait gagner beaucoup de temps comme Cookie Consent).
ThomasLBA Le 22 mai 2018 à 19:27
Je vais faire des captures et les afficher !
PS : Pas de quoi pour Browser Update 😉 !
Profil introuvable Le 23 mai 2018 à 02:26
Ah OK je comprend mieux tu voudrais que le label reste en haut tant qu'il est rempli, donc pour cela je te renvoie sur le tuto de Jonathan (Grafikart). Regarde bien la vidéo, je quoi qu'il te donne la réponse de la façon dont il a fait. Si ça ne t'a toujours pas débloquer dis-le moi/nous.
PS : Finalement Browser Update m'a un peu déçu (niveau personnalisation et paramétrage), je ne sais pas si je compte le garder mais j'ai vu aussi Outdated Browser qui a l'air beaucoup mieux que Browser Update mais je n'ai toujours pas compris comment on l'installe... 😂
ThomasLBA Le 26 mai 2018 à 10:17
PS : Finalement Browser Update m’a un peu déçu (niveau personnalisation et paramétrage), je ne sais pas si je compte le garder mais j’ai vu aussi Outdated Browser qui a l’air beaucoup mieux que Browser Update mais je n’ai toujours pas compris comment on l’installe... 😂J’ai trouvé un lien github avec le code à mettre sur ton site : ICI
Sinon tu peut totalement personnaliser le css de Browser Update et tu as accès aux réglages principaux comme le fait de choisir quelles versions tu veux accepter, je le trouve assez complet perso mais chacun ses goûts !!!
Profil introuvable Le 27 mai 2018 à 01:11 (Édité le 27 mai 2018 à 01:12)
Non ce n’est pas exactement ça le problème ! En fait, des fois, quand on charge une page web, des champs de formulaires sont déjà préremplis avec les identifiants que tu as préalablement enregistré ! Le truc c’est que quand ça arrive, la gestion des classes que j’ai mis en place et qui fonctionne très bien autrement ne le prends pas en compte du coup il faut que j’appuie sur le champ pour que JS comprennent que le champ n’es pas vide... En espérant que tu comprenne.Quand tu fais F12 ou "Outils > "Développement web" > "Outils de développement" sur Firefox dans l'onglet "Console", tu n'as aucune erreur de chargement de script ou autre ? Montre-nous tes codes JavaScript concernés pour qu'on puisse voir le(s) soucis. De mon côté je fais des recherches à propos de ça (si j'ai bien compris c'est : "problème de mémorisation javascript").
J’ai trouvé un lien github avec le code à mettre sur ton site : ICIFinalement, c'est moi qui est eu tort, Browser Update est très bien, hier ils ont fait une mise à jour que j'ai peu apprécier (quand on clique sur "Ignorer" il affiche un autre message avec le rappel de 7 jours), mais ils ont indiqué comment l'enlever (le message qui t'annonce le rappel dans 7 jours) car cela gênait mon visiteur sachant que je l'affichait tout le temps grâce à la fonction js "reminder: 0" (0 = toujours afficher). Maintenant je compte garder Browser Update longtemps ! 😉 (Adieu Outdated Browser qui lui est trop compliqué à installer à mon goût) (ce n'est pas le fait de la langue anglaise sur GitHub mais le nombre de div, de CSS et autre à mettre dans le code, c'est relou alors que Browser Update c'est un p'tit script 😂).
Sinon tu peut totalement personnaliser le css de Browser Update et tu as accès aux réglages principaux comme le fait de choisir quelles versions tu veux accepter, je le trouve assez complet perso mais chacun ses goûts !!!
ThomasLBA Le 27 mai 2018 à 09:50 (Édité le 27 mai 2018 à 09:53)
$('.field-input').focus(function() {
$(this).parent().addClass('field-active field-not-empty');
});
$('.field-input').blur(function() {
$parent = $(this).parent();
if($(this).val() === '') {
$parent.removeClass('field-not-empty');
}
$parent.removeClass('field-active');
});Par exemple quand on enregistre un mot de passe dans Firefox, les champs concernés se remplissent automatiquement dès le chargement de la page sans avoir besoin de le faire manuellement, le problème est que mon script JS ne déclenche l'animation qu'a partir du clic de l'utilisateur, ensuite, il vérifie s'il y a du texte et si oui ajoute une classe, tout cela fonctionne à merveille mais je me disais peut-être une pseudo-classe CSS (comme ::after) genre :filled ou un truc dans le genre 😉
Finalement, c'est moi qui est eu tort, Browser Update est très bien, hier ils ont fait une mise à jour que j'ai peu apprécier (quand on clique sur "Ignorer" il affiche un autre message avec le rappel de 7 jours), mais ils ont indiqué comment l'enlever (le message qui t'annonce le rappel dans 7 jours) car cela gênait mon visiteur sachant que je l'affichait tout le temps grâce à la fonction js "reminder: 0" (0 = toujours afficher). Maintenant je compte garder Browser Update longtemps ! (Adieu Outdated Browser qui lui est trop compliqué à installer à mon goût) (ce n'est pas le fait de la langue anglaise sur GitHub mais le nombre de div, de CSS et autre à mettre dans le code, c'est relou alors que Browser Update c'est un p'tit script ).Content que tu ai pu te réconcilier avec BrowserUpdate 😉
Profil introuvable Le 29 mai 2018 à 01:08 (Édité le 29 mai 2018 à 01:09)
Par exemple quand on enregistre un mot de passe dans Firefox, les champs concernés se remplissent automatiquement dès le chargement de la page sans avoir besoin de le faire manuellement, le problème est que mon script JS ne déclenche l'animation qu'a partir du clic de l'utilisateur, ensuite, il vérifie s'il y a du texte et si oui ajoute une classe, tout cela fonctionne à merveille mais je me disais peut-être une pseudo-classe CSS (comme ::after) genre :filled ou un truc dans le genreOui je comprend mieux maintenant, mais le soucis c'est que comme toi je faisais des formulaires en Material Design de Google mais je n'en ai jamais fait pour une inscription ou une connexion... Du coup je n'ai pas de soluce mis à part que la propriété (:: after) c'est une piste car je l'ai utilisé aussi. 😉
Content que tu ai pu te réconcilier avec BrowserUpdateTant qu'il m'affiche ce que je veux qu'il m'affiche, y'a pas de soucis 😂😉
ThomasLBA Le 2 juin 2018 à 10:32 (Édité le 2 juin 2018 à 10:35)
<form autocomplete="on|off">
...
</form>
Profil introuvable Le 5 juin 2018 à 02:01
Quand je pense que j'ai fait plusieurs recherches sans aucun résultats et que j'apprends que la réponse c'est celle-ci... Je crois que je vais arrêter le café... ou la drogue... 😭
Content que t'ai réussi @ThomasYTB ! 😉
vainoctagon Le 25 septembre 2018 à 00:35
Hello, désolé de ne pas avoir répondu depuis tout ce temps, je n'ai pas reçu de mails et je n'ai pas pensé à regarder !Ah OK je comprend mieux tu voudrais que le label reste en haut tant qu'il est rempli, donc pour cela je te renvoie sur le tuto de Jonathan (Grafikart). Regarde bien la vidéo, je quoi qu'il te donne la réponse de la façon dont il a fait. Si ça ne t'a toujours pas débloquer dis-le moi/nous.
Je vais faire des captures et les afficher !
PS : Pas de quoi pour Browser Update & Super Mario Bros full version !
