Bootstrap材料浮动标签不能在自动填充上工作

Question

我在我的页面上使用自举材料套件,但是我的标签没有在自动填充中出现问题.我已经四处搜索,看到这是一个已知的问题,并尝试使用此处建议的解决方案.但它仍然不适合我.不知道该怎么解决？

这就是我调用样式表的方式:

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

Answer 1

这最终对我有用：

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