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

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

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2