Nhãn nổi vật liệu Bootstrap không hoạt động khi tự động điền

Tôi đang sử dụng bootstrap material kit trên trang của mình, nhưng tôi gặp sự cố với nhãn không tự động điền trong chrome. Tôi đã tìm kiếm xung quanh và thấy rằng đó là một vấn đề đã biết và đã thử sử dụng giải pháp được đề xuất here. Nhưng nó vẫn không hoạt động đối với tôi. Không biết làm thế nào để sửa chữa nó?Nhãn nổi vật liệu Bootstrap không hoạt động khi tự động điền

Đây là cách tôi gọi stylesheets tôi:

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

Và kịch bản:

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

Nguồn

2017-02-05 Marco

Vấn đề bạn liên kết đến gợi ý rằng nó cần phải có được cố định trong 'v0.4.1' của Vật liệu Bộ dụng cụ. Phiên bản bạn đang sử dụng? –

Tôi đang sử dụng 'v1.1.0' – Marco

Bạn có thể cho chúng tôi một ví dụ trực tiếp để gỡ lỗi không? –

Đây là những gì làm việc cho tôi cuối cùng:

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

Nguồn

2017-02-17 10:01:10 Marco

-1

Highlight là trình duyệt nhìn vào thẻ name của trường và làm cho một giáo dục đoán tại những loại dữ liệu sẽ đến đó (regex phù hợp là một ngây thơ tốt w ay để làm điều này). Chrome đang làm việc để có được một số loại tiêu chuẩn hóa để điều này không hoàn toàn là hit-or-miss.

Nguồn

2017-02-13 05:38:07

Tôi đã đi qua liên kết mà bạn đã đề cập cho bootstrap material kit và tôi đã tạo mã mẫu này bằng cách bao gồm các tệp JS và css giống nhau được thêm vào trang web bộ tài liệu bootstrap của bộ phận khởi động. Tôi tin rằng yêu cầu của bạn là kéo nhãn mật khẩu khi đầu vào được lấy nét.

Dưới đây là mã của tôi. Tôi hy vọng nó sẽ giúp bạn.

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

Nguồn

2017-02-13 19:35:32

Vấn đề không phải là khi trường nhập được lấy nét, đó là khi trường được tự động điền bằng chrome – Marco

Tôi nhận được nó ngay bây giờ khi chrome tự động điền mật khẩu vào đầu vào nhãn mật khẩu và giá trị chồng chéo. Chức năng của nhãn hoạt động khi chúng ta tập trung vào đầu vào và lớp "rỗng" được loại bỏ thông qua js sẽ đẩy nhãn lên trên. Bạn có đang đối mặt với vấn đề này chỉ trong chrome hoặc các trình duyệt khác không? Sẽ rất hữu ích khi gỡ lỗi nếu bạn thêm mã vào một đoạn trích hoặc đoạn mã. Cảm ơn bạn. –

Tôi đã chỉnh sửa mã trên và thêm cùng một mã HTML cho mật khẩu mà bạn đã đề cập và gán một giá trị cho mật khẩu và nó dường như không trùng lặp. –

Nhãn nổi vật liệu Bootstrap không hoạt động khi tự động điền

Trả lời

Các vấn đề liên quan