Faire matérialiser les étiquettes de sortir de la zone de saisie lors de la saisie de la boîte est remplie via javascript

Normalement, avec Matérialiser, les étiquettes pour les zones d'entrée de texte afficher jusqu'à l'intérieur de l'entrée des boîtes jusqu'à un utilisateur d'entrer sélectionne la case et saisissez le texte. Toutefois, lorsqu'une zone de valeur est rempli à l'aide de javascript, l'étiquette ne se déplace pas hors de la voie. Il reste dans la boîte et les chevauchements avec le texte entré. Est-il un moyen pour déclencher l'étiquette de la transition avec du javascript, de sorte que cela ne se produise pas?

OriginalL'auteur neurodynamic | 2015-08-19

  1. 17

    Plus précisément, si vous utilisez de se Matérialiser dans les Rails avec turbolinks activé, vous trouverez que se Matérialisent les champs de formulaire qui sont pré-remplis avec les valeurs non vides ne sont pas actifs sur le chargement de la page.

    La méthode suivante a fonctionné pour moi:

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

    Il va ajouter de la classe 'active' à la fois des étiquettes correspondantes et préfixe icônes.

    Matérialiser ne fonctionne plus, vous pouvez le remplacer par M.updateTextFields();

    OriginalL'auteur elquimista

  2. 12

    L'étiquette comportement de transition est déclenchée par l'ajout de la active classe à l'étiquette de l'élément. Ainsi, si vous faites votre javascript ajouter que la classe de l'étiquette (p. ex. $('label').addClass('active')) en plus de remplir le champ, l'étiquette de la transition hors du champ comme il le ferait lorsqu'il est sélectionné par une action de l'utilisateur.

    OriginalL'auteur neurodynamic

  3. 0

    Avec JQuery, vous pouvez utiliser
    $('#yourInputText').modifier();

    vous devez être plus explicite à propos de votre réponse pour le plaisir des débutants.
    Seulement yout besoin que d'une seule ligne. $('input').modifier() ou se Matérialiser.updateTextFields(). C'est tout.

    OriginalL'auteur ferchoman09

  4. 0

    La document.ready événement déclencher une seule fois lors de la turbolinks est de travail, de sorte qu'au lieu d'avoir à recourir à la turbolinks charge de l'événement.

    Il arrive donc rapide que si vous voulez voir l'animation, de l'envelopper dans un petit délai d'attente.

    Avec timeout/visible animation

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

    Sans délai d'attente, le visible de l'animation

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

    Rails 5 avec Turbolinks, et de Matérialiser CSS 1.0.0

    OriginalL'auteur Steve Meisner