在TextField中键入不会使标签浮动
在TextField中键入不会使标签浮动
提问于 2018-08-26 02:48:34
我用Material Design components制作了一个表单。
我的TextField浮动标签在AutoFill填充输入时浮动，而不是在用户键入时浮动。
function fillFields() {
$("#passwordTextField").val("test");
$("#usernameTextField").val("test");
}p.highlight-red-on-error {
transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
div.mdc-text-field--invalid~p.highlight-red-on-error {
color: #b00020;
}<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div>
<div class="mdc-text-field">
<input type="text" id="usernameTextField" name="username" class="mdc-text-field__input" pattern="[A-Za-z]*" required minlength=3 maxlength=32 data-mdc-auto-init="MDCTextField">
<label for="usernameTextField" class="mdc-floating-label">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="highlight-red-on-error">Username must be between 3 and 32 characters and contain only alphanumeric characters.</p>
</div>
<br>
<!-- password field -->
<div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input type="password" id="passwordTextField" name="password" class="mdc-text-field__input" pattern="[A-Za-z!%^&*$?~`=+-_()]*" required minlength=8>
<label for="passwordTextField" class="mdc-floating-label">Password</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="highlight-red-on-error">Password must be at least 6 characters. Some special charcaters are not allowed</p>
</div>
<p>
Typing in the fields doesn't float the labels, but using autofill does.
</p>
<button onClick="fillFields()">Fill fields (doesn't float labels)</button>
<script>
window.mdc.autoInit();
// from https://github.com/material-components/material-components-web/tree/master/packages/mdc-auto-init#using-as-part-of-material-components-web
</script>
</body>
正如您所看到的，无论是通过JavaScript编辑字段还是键入字段都不会使标签浮动。只有使用自动填充才能。此外，autoInit();似乎不起作用。
回答 1
Stack Overflow用户
发布于 2020-06-09 08:16:16
我认为data-mdc-auto-init必须添加到顶级mdc-text-field，而不是输入字段。我自己也遇到了这个问题，并将其添加到顶层，并在页面上的onload事件解决问题后调用mdc.autoInit()。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52020280
复制相关文章
相似问题