如何防止浮动标签与输入混淆？
如何防止浮动标签与输入混淆？
提问于 2015-07-31 07:20:13
我正在尝试使用自举材料设计主题，在该字段中，我使用了一个简单的文本输入字段，其代码如下：
<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：
<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。两者都是最新的。看看这个：
有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-10-03 18:04:22
您不应该对输入中的“空”类进行硬编码，而应该使用material.js脚本来构建DOM，并处理“空”css类。
您已经导入了material.js，所以没关系。您需要的更改如下：
- 用material.js初始化：
<script>
$.material.init();
</script>
- 清理你的DOM。您的表单应该如下所示：
我希望这能帮上忙。
Stack Overflow用户
发布于 2018-03-06 21:17:31
我做到了
setTimeout(() => {
$('.card-content input').change();
$('.card-content textarea').change();
}, 500);Stack Overflow用户
发布于 2020-12-02 11:41:32
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();
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31740324
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号