ブートストラップマテリアルフローティングラベルがオートフィルで機能しない

私のページにbootstrap material kitを使用していますが、クロームのオートフィルにラベルが表示されないという問題があります。私は周りを探索し、それが既知の問題であると見て、解決策を使用して試してhereを提案しました。しかし、それはまだ私のために働いていません。それを修正する方法を知らないのですか？ブートストラップマテリアルフローティングラベルがオートフィルで機能しない

これは私が私のスタイルシートを呼び出す方法です：

<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>

とスクリプト：

<!-- 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>

出典

2017-02-05 Marco

あなたにリンクする問題は、それが材料のv0.4.1' 'に固定されている必要があることを示唆していますキット。どのバージョンを使用していますか？ –

私は 'v1.1.0'を使用しています – Marco

デバッグのライブサンプルを教えてもらえますか？ –

これは最後に私のために働いていたものです：

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

出典

2017-02-17 10:01:10 Marco

-1

ハイライトは、ブラウザがフィールドのnameタグを見て、ということですどのようなデータがそこに行くのだろうと推測されます（正規表現マッチングは良いナイーブなwですこれを行うには）。 Chromeは何らかの標準化を達成するために努力しているため、これはヒット・アンド・ミスではありません。

出典

2017-02-13 05:38:07

あなたはbootstrap material kitについて言及したリンクを通過しました。このサンプルコードは、Creative Timのブートストラップマテリアルキットウェブサイトに追加された同じJSファイルとCSSファイルを含めて作成しました。あなたの要求は、入力がフォーカスされるとパスワードのラベルを引き上げることだと私は信じています。

以下は同じことをする私のコードです。それがあなたを助けることを願っています

<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>

出典

2017-02-13 19:35:32

入力フィールドにフォーカスが当たっているときではなく、フィールドがクロムで自動入力されているときです。 – Marco

入力時にパスワードが自動的に入力され、値が重複しているときに表示されます。ラベルの機能は、入力に焦点を当てるときに機能し、 "is-empty"クラスはラベルを上に押すjsによって削除されます。この問題はChromeや他のブラウザでも直面していますか？スニペットやフィドルにコードを追加するとデバッグすると便利です。ありがとうございました。 –

私は上記のコードを編集し、あなたが言及しパスワードに値を割り当てたパスワードと同じHTMLコードを追加しました。重複していないようです。 –

ブートストラップマテリアルフローティングラベルがオートフィルで機能しない

答えて

関連する問題