引导中与表单输入重叠的浮动表单标签
引导中与表单输入重叠的浮动表单标签
提问于 2022-01-31 15:46:40
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/compiled.min.css"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<title>Hello, world!</title>
</head>
<body style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0">
<div class="container">
<div class="row justify-content-center">
<div class="col-8">
<section class="p-5 w-auto">
<div class="row justify-content-center">
<div class="col-12">
<div class="card text-black" style="border-radius: 25px">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 order-2">
<p class="text-center h1 fw-bold mb-5 mt-4">Welcome</p>
<form action="http://localhost:3000/signin" , method="POST">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c" style="margin-left: 0px">Username</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px"></div>
<div class="form-notch-middle" style="width: 71.2px"></div>
<div class="form-notch-trailing"></div>
</div>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c" style="margin-left: 0px">Password</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px"></div>
<div class="form-notch-middle" style="width: 64px"></div>
<div class="form-notch-trailing"></div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="submit" class="btn btn-primary btn-lg">Login</button>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Forgot password?</button>
</div>
</form>
</div>
<div class="col-md-8 d-flex align-items-center order-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
class="img-fluid"
alt="Sample image"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
在这里，如果我在输入字段中键入某些内容，然后单击表单中的其他位置，这些字段就会失去焦点。我希望只要字段中包含一些文本内容，标签也会保持在上面，但事实并非如此。标签移动并与文本内容重叠。
我该怎么纠正这种行为？我希望字段标签在它里面有文本时保持不动。如果字段为空，则当焦点不集中时，标签应在字段中向下移动。
回答 1
Stack Overflow用户
发布于 2022-01-31 16:07:00
找到了我的解决方案。只需将此添加到每个字段的onfocusout中即可
<script>
const slickAnim = () => {
let field = document.querySelector('#form3Example1c');
console.log(field.value);
if (field.value.length > 0) {
field.classList.add('active');
} else {
field.classList.remove('active');
}
};
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70928805
复制相关文章
相似问题
腾讯云开发者
