Bootstrap Material Design(4.1.1) 的 bmd-label-floating 与自动对焦属性配合不佳

Question

1。页面加载

自动对焦属性不会触发Bootstrap-JavaScript将is-focusedclass添加到对应的(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。打字后

在字段中输入内容时，标签会上升，因为添加了 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。重新选择后（理想的输出）

取消选择文本输入（使用鼠标点击或 tab 键）然后再次选择它是获得 is-focused class 的唯一方法（因此使它看起来应该).

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

问题

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

Bootstrap Material 使用的设计：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 class 硬编码到自动对焦项目的相应 (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">

如果您正在使用属性自动对焦、必需、只读等.. i:

自动对焦，必需的，只读同样，它不起作用，因此您必须添加一个新的自定义 class 才能在这种情况下工作。

Answer 3

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

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

Bootstrap Material Design(4.1.1) 的 bmd-label-floating 与自动对焦属性配合不佳

Bootstrap Material Design(4.1.1)'s bmd-label-floating not working well with autofocus attribute

javascript

focus

autofocus

material-design

bootstrap-4

1。页面加载

2。打字后

3。重新选择后（理想的输出）

问题

Source/input html: