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

【问题标题】：How to prevent floating-label to mix with input?如何防止浮动标签与输入混合？
【发布时间】：2015-07-31 07:20:13
【问题描述】：

我正在尝试使用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] 对我来说，小提琴也不起作用。我在 Chrome 和 Firefox 中都试过了。两者都是最新的。看看吧：

有什么想法吗？

【问题讨论】：

你有多余的css吗？
@AleshaOleg - 不，什么都没有。
我认为这是某种错误，我认为尝试向 github 发送拉取请求
检查所有js是否正确包含。 @kramer65
它在小提琴jsfiddle.net/vvwdcd7z中正常工作

标签： html css twitter-bootstrap css-float bootstrap-material-design

【解决方案1】：

您不应该在输入中硬编码“空”类，而应该使用 material.js 脚本，该脚本将构建您的 DOM，并处理“空”css 类。

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

用 material.js 初始化：

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

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

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

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我做到了

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

【讨论】：

谢谢，我在控制器的 init 中为 AngularJS 做了类似的事情：$(document).ready(function() { $('.form-control').change(); });

【解决方案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();
});

【讨论】：