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

有什么想法吗？

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

我希望这会有所帮助。

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();
});

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

3 个答案: