matériau Bootstrap étiquette flottante ne fonctionne pas sur autofill

J'utilise bootstrap material kit sur ma page, mais j'ai un problème avec une étiquette ne va pas sur le remplissage automatique en chrome. J'ai cherché autour et j'ai vu que c'est un problème connu, et j'ai essayé d'utiliser la solution proposée here .Mais ça ne marche toujours pas pour moi. Je ne sais pas comment le réparer?matériau Bootstrap étiquette flottante ne fonctionne pas sur autofill

Voilà comment j'appelle mes feuilles de style:

<link href="/css/material-kit/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="/css/material-kit/css/material-kit.css" rel="stylesheet"/> 
<link href="/css/landing-page.css" rel="stylesheet"/>

Html:

<div class="form-group label-floating"> 
    <label class="control-label">Password</label> 
    <input type="password" name="password" class="form-control" required/> 
    @if ($errors->has('password')) 
     <span class="help-block"> 
      <strong>{{ $errors->first('password') }}</strong> 
     </span> 
    @endif 
</div>

Et scripts:

<!-- Core JS Files --> 
<script src="/js/landing-page/jquery.min.js" type="text/javascript"></script> 
<script src="/js/landing-page/bootstrap.min.js" type="text/javascript"></script> 
<script src="/js/landing-page/material.min.js"></script> 
<script> 
    $(document).ready(function() { 
      $.material.options.autofill = true; 
      $.material.init(); 
    }); 
</script>

Source

2017-02-05 Marco

La question que vous suggère un lien vers ce qu'il aurait dû être fixée dans 'v0.4.1' du matériel Trousse. Quelle version utilisez-vous? –

J'utilise 'v1.1.0' – Marco

Pouvez-vous nous donner un exemple en direct pour déboguer? –

C'est ce qui a fonctionné pour moi à la fin:

$(window).load($.debounce(200,function(){ 
    $('input:-webkit-autofill').each(function(){ 
     if ($(this).val().length !== "") { 
      $(this).siblings('label, i').addClass('active'); 
     } 
    }); 
}));

Source

2017-02-17 10:01:10 Marco

-1

Highlight est que le navigateur regarde étiquette name du champ et fait une supposition éclairée à quel type de données irait là (regex correspondant est un bon naïf w ay pour faire ceci). Chrome travaille pour obtenir une sorte de normalisation afin que ce ne soit pas tout à fait comme un succès.

Source

2017-02-13 05:38:07

Je suis passé par le lien que vous avez mentionné pour bootstrap material kit et j'ai créé cet exemple de code en incluant les mêmes fichiers JS et CSS qui sont ajoutés sur le site Web du kit de matériel bootstrap de creative-tim. Je crois que votre exigence est de tirer l'étiquette du mot de passe une fois que l'entrée est sur le point.

Voici mon code qui fait la même chose. J'espère que ça t'aide.

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>Bootstrap Material</title> 
 

 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"> 
 

 
    <!-- Bootstrap --> 
 
    <link href="http://demos.creative-tim.com/material-kit/assets/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Bootstrap Material Design --> 
 
    <link href="http://demos.creative-tim.com/material-kit/assets/css/material-kit.css" rel="stylesheet"> 
 

 

 
</head> 
 

 
<body> 
 
    <div class="card"> 
 
    <form class="form" method="" action=""> 
 
     <div class="content"> 
 
     <div class="input-group"> 
 
      <span class="input-group-addon"> 
 
\t \t \t <i class="material-icons">face</i> 
 
\t \t </span> 
 
      <input type="text" class="form-control" placeholder="First Name..."> 
 
     </div> 
 
     <div class="input-group"> 
 
      <span class="input-group-addon"> 
 
\t \t \t <i class="material-icons">email</i> 
 
\t \t </span> 
 
      <input type="text" class="form-control" placeholder="Email..."> 
 
     </div> 
 
     <div class="input-group"> 
 
      <span class="input-group-addon"> 
 
\t \t \t <i class="material-icons">lock_outline</i> 
 
\t \t </span> 
 
      <div class="form-group label-floating"> 
 
    <label class="control-label">Password</label> 
 
    <input type="password" name="password" class="form-control" required value="37648763"/> 
 

 
</div> 
 
      <div class="form-group label-floating"> 
 
    <label class="control-label">Password</label> 
 
    <input type="password" name="password" class="form-control" required/> 
 

 
</div> 
 
      
 
     </div> 
 
     </div> 
 
     <div class="footer text-center"> 
 
     <a href="#pablo" class="btn btn-simple btn-primary btn-lg">Get Started</a> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <script src="http://demos.creative-tim.com/material-kit/assets/js/jquery.min.js"></script> 
 
    <script src="http://demos.creative-tim.com/material-kit/assets/js/material.min.js"></script> 
 
    <script src="http://demos.creative-tim.com/material-kit/assets/js/material-kit.js"></script> 
 
</body> 
 

 
</html>

Source

2017-02-13 19:35:32

Le problème n'est pas quand le champ d'entrée est sur le focus, c'est quand le champ est rempli automatiquement par chrome – Marco

Je l'obtiens maintenant quand chrome est le mot de passe de remplissage automatique dans l'entrée l'étiquette de mot de passe et la valeur se chevauchent. Le fonctionnement de l'étiquette fonctionne lorsque nous nous concentrons sur l'entrée et la classe "is-empty" est enlevée par js qui va pousser l'étiquette vers le haut. Êtes-vous confronté à ce problème uniquement dans le chrome ou d'autres navigateurs? Il serait utile de déboguer si vous ajoutez du code dans un extrait ou un violon. Je vous remercie. –

J'ai modifié le code ci-dessus et ajouté le même code HTML pour le mot de passe que vous avez mentionné et attribué une valeur au mot de passe et il ne semble pas se chevaucher. –

matériau Bootstrap étiquette flottante ne fonctionne pas sur autofill

Répondre

Questions connexes