如何防止浮动标签与输入混合？

Question

我正在尝试使用 Bootstrap Material design theme，我现在在其中使用带有以下代码的简单文本输入字段：

<div class="form-control-wrapper">
    <input class="form-control empty" type="text"></input>
    <div class="floating-label">
        Title
    </div>
    <span class="material-input"></span>
</div>

看起来像这样：

但是当我输入一些文本时，文本和标签混在一起：

floating-label 不应该消失吗？我做错了什么？

欢迎所有提示！

[编辑 2]

这些都是我在 <head>:

中导入的

<html ng-app="myApp">
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <!-- Bootstrap -->
    <link src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Bootstrap Material Design (https://github.com/FezVrasta/bootstrap-material-design) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>

    <!-- Angular -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

    <!-- My own scripts -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body>

    <div ui-view></div>

</body>
</html>

和我使用 Angular:

加载的 main.html

<form novalidate>
    <div class="form-control-wrapper">
        <input class="form-control empty" type="text"></input>
        <div class="floating-label">
            Title
        </div>
        <span class="material-input"></span>
    </div>
</form>

[编辑 3] 对我来说 fiddle 也不起作用。我在 Chrome 和 Firefox 中都试过了。两者都是最新的。看看：

有什么想法吗？

Answer 1

您不应该在输入中硬编码 "empty" class，相反，您应该使用 material.js 脚本，它将构建您的 DOM，并处理 "empty" css class.

您已经导入了 material.js，所以没关系。您需要的更改是：

用material.js初始化：

<script>
  $.material.init();
</script>

清理你的DOM。您的表单应如下所示：

<form novalidate>
<input type="text" class="form-control floating-label" placeholder="your label"/>
</form>

希望对您有所帮助。

Answer 2

我做到了

  setTimeout(() => {
    $('.card-content input').change();
    $('.card-content textarea').change();
  }, 500);

Answer 3

function fixEmptyInputs() {
    $(':input.empty').each(function () {
        $(this).addClass('xempty');
        if ($(this).val() != undefined && $(this).val() != '') {
            $(this).removeClass('empty')
        } else {
            $(this).addClass('empty');
        }
    });
    $(':input.xempty').change(function () {
        if ($(this).val() != undefined && $(this).val() != '') {
            $(this).removeClass('empty')
        } else {
            $(this).addClass('empty');
        }
    })
}

$(document).ready(function () {
    fixEmptyInputs();
});
$(document).ajaxComplete(function () {
    fixEmptyInputs();
});

如何防止浮动标签与输入混合？

How to prevent floating-label to mix with input?

html

css

twitter-bootstrap

css-float

bootstrap-material-design