0

我正在尝试使用Bootstrap Material 设计主题，我现在使用带有以下代码的简单文本输入字段：

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

和我main.html使用 Angular 加载的：

<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 中都试过了。两者都是最新的。一探究竟：

在此处输入图像描述

有任何想法吗？

4

3 回答 3

1

我做到了

  setTimeout(() => {
    $('.card-content input').change();
    $('.card-content textarea').change();
  }, 500);
于 2018-03-06T21:17:31.607 回答
1

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

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

  1. 用 material.js 初始化：

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

  1. 清理你的 DOM。您的表单应如下所示： 
    <form novalidate>
<input type="text" class="form-control floating-label" placeholder="your label"/>
</form>

我希望这将有所帮助。

于 2015-10-03T18:04:22.127 回答
0 

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

于 2020-12-02T11:41:32.630 回答