Salut, j'utilise le framework Material Design Lite de google. Mais j'ai un petit soucis.

Je suis en train de faire un formulaire pour écrire un article. Normalement on doit utiliser une textarea pour écrire mais vu que que je voulais faire un éditeur WYSIWYG ça ne marchait pas. Donc j'ai suivi le tuto d'OCR sur le sujet et j'ai utilisé une div. Lorsque que je clique sur le bouton publier ça charge le texte dans une textarea cachée et ensuite j'appelle le script PHP.

Ca c'était pour expliquer le contexte. Voilà une image pour illustrer : https://i.imgur.com/fe6ulH6.png

Les champs "Titre" et "Résumé" sont des input type text et ils portent l'attribut required. C'est pourquoi ils sont en rouge.

Avant d'utiliser la div pour écrire, j'utilisais donc une textarea avec le même attribut. Si elle était vide la bordure en bas était rouge.

Mais j'ai dû changer l'élément et j'ai perdu cet attribut. Maintenant la bordure inférieure de la div, qu'elle soit vide ou pas, sera toujours bleue.

Pour bien voir les différents états voilà des captures d'écran :

https://i.imgur.com/pn9bCa2.png : Je n'ai pas encore cliqué sur la div, la bordure inférieure devrait être rouge

https://i.imgur.com/fe6ulH6.png : J'ai cliqué dessus mais la div est vide => bordure rouge

https://i.imgur.com/D5Scbsr.png : J'ai cliqué dessus, j'ai écris un texte => bordure bleue (cet état fonctionne)

Sachant qu'en plus, lorsque je clique sur la div il y a une animation faite par google. Je vous invite à tester ça sur ce lien : https://getmdl.io/components/#textfields-section

Vous savez comment je peux changer ça en CSS ?

Merci ;-)

-
Edité par mleb 24 mai 2017 à 13:56:18

Salut,

Pourquoi avoir enlevé la textarea si d'après ce que tu dis elle faisait totalement ce dont tu avais besoin ?

Ce que je ne comprend pas comment tu écris sans un élément de type input ?

-
Edité par Mamashi 26 mai 2017 à 15:44:17

bonjour

sans code difficile de t'aider

as tu essayer de mettre la class validate sur tes input (doc materialize)

elle est parfois bugée par contre surtout sur les input type select ,pour les select j'avais resolu le probleme avec du js et CSS en changeant l'attribut border-bottom de moimoire

-
Edité par wimbo 26 mai 2017 à 16:42:13