web-dev-qa-db-fra.com

Faire matérialiser les étiquettes se déplacer hors de la zone de saisie lorsque la zone de saisie est remplie via javascript

Normalement, avec Materialise , les étiquettes des zones de saisie de texte apparaissent dans les zones de saisie jusqu'à ce qu'un utilisateur entre sélectionne la zone et y entre du texte. Toutefois, lorsque la valeur d'une boîte est renseignée via javascript, le libellé ne disparaît pas. Il reste dans la case et chevauche le texte saisi. Existe-t-il un moyen de déclencher la transition des libellés avec javascript également, afin que cela ne se produise pas?

csslabelsmaterialize
13
neurodynamic

Plus précisément, si vous utilisez Materialize dans Rails avec l'option turbolinks activée, vous constaterez que les champs de formulaire Materialize préremplis avec des valeurs non vides ne sont pas actifs au chargement de la page.

La méthode suivante a fonctionné pour moi:

$(function() {
    Materialize.updateTextFields();
});

Cela ajoutera la classe 'active' aux étiquettes et aux préfixes correspondants.

19
elquimista

Le comportement de transition d'étiquette est déclenché par l'ajout de la classe active à l'élément de l'étiquette. Ainsi, si vous faites que votre javascript ajoute cette classe au libellé (par exemple, $('label').addClass('active')) en plus de remplir le champ, le libellé sortira du champ comme il le ferait s’il était sélectionné par une action de l’utilisateur.

13
neurodynamic

L'événement document.ready ne se déclenche qu'une seule fois lorsque turbolinks fonctionne. Vous devez donc vous connecter à l'événement de charge de turbolinks.

Il arrive so rapidement que si vous voulez voir l'animation, enveloppez-la dans un délai très court.

Avec expiration/animation visible

document.addEventListener('turbolinks:load', () => {
    setTimeout(() => {
        M.updateTextFields();
    }, 100);
});

Sans délai d'attente/animation visible

document.addEventListener('turbolinks:load', () => {
    M.updateTextFields();
});

Rails 5 avec Turbolinks et Materialise CSS 1.0.0

1
Steve Meisner

Avec JQuery, vous pouvez utiliser $ ('# Votre texte d'entrée'). Change ();

0
ferchoman09