Bootstrap Material Design（4.1.1）的bmd-label-floating与自动聚焦属性不兼容

Question

1. On page load

autofocus属性不会触发Bootstrap-JavaScript将is-focused类添加到相应的(bmd-)form-group。

<fieldset class="form-group bmd-form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

2. After some typing

在字段中键入内容时，标签会上升，因为is-filled已添加，但仍无法识别焦点。

<fieldset class="form-group bmd-form-group is-filled">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

3. After reselecting (desirable output)

取消选择文本输入（使用鼠标点击或制表键）然后再次选择它是获取is-focused类的唯一方法（因此使其看起来应该如此）。

<fieldset class="form-group bmd-form-group is-filled is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Question

这个问题是否有任何修复或解决方法？

使用的Bootstrap材料设计：https://fezvrasta.github.io/bootstrap-material-design/（版本4.1.1）

Source/input html:

<fieldset class="form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Answer 1

我的解决方案：将is-focused类硬编码为自动对焦项目的相应(bmd-)form-group。

<fieldset class="form-group is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Answer 2

如果你们使用类似下面的代码那么它很好（bmd-）form-group。

<input type="text" class="form-control text-light" id="usernameControl" name="username">

如果您正在使用自动对焦，必需，只读等属性..我：

自动对焦，必需，只读和相似，它不起作用，因此您必须添加新的自定义类来处理此方案。

Answer 3

<script> $('body').bootstrapMaterialDesign({}); </script>

如果您使用https://fezvrasta.github.io/bootstrap-material-design，请将此添加到您的网站。这将修复表单等。