在当前的设计中，提供了一个用于输入文本的输入字段。当聚焦或选择此输入字段时，关联的标签会稍微向上移动，改变其颜色和字体大小，并获取背景颜色，这是完美的。
但是，当在输入字段中输入文本，然后单击外部以在另一个字段中输入时，会出现问题。在这种情况下，标签会返回到其原始位置并与文本交织在一起，从而形成凌乱的外观。
为了解决这个问题，我期望的结果是，一旦标签在输入字段中键入后向上移动，它应该保持在该升高的位置，而不是恢复到其原始位置。
请在这里帮助我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.input[type="email"] {
display: block;
border: 1px solid rgb(228, 228, 228);
font-size: 16px;
width: 20%;
height: 55px;
padding: 0 15px;
margin-bottom: 10px;
position: relative;
z-index: 2;
background-color: transparent;
outline: none;
border-radius: 5px;
position: relative;
}
.inputs {
position: relative;
}
.input-label {
position: absolute;
top: 15px;
font-size: 1.1rem;
left: 14px;
color: rgb(122, 122, 122);
font-weight: 100;
transition: 0.1s ease;
background-color: white;
padding: 0 5px;
}
.input[type="email"]:focus~.input-label {
top: -7px;
color: #18c9c0;
font-size: 13px;
background-color: rgb(255, 255, 255);
z-index: 2;
}
.input[type="email"]:focus {
border: 2px solid #afff03;
}
</style>
<title>Document</title>
</head>
<body>
<div class="inputs">
<input type="email" name="" id="email" class="input">
<label for="email" class="input-label">Enter Text</label>
</div>
</body>
</html>
是的，现在你必须添加javascript来处理这个问题。请在您的代码中添加 javaScript，您的结果将是完美的
const holdUp = () => {
const labels = document.querySelectorAll('label')
labels.forEach(label => {
const input = label.previousElementSibling
input.addEventListener('change', function() {
if (input.value !== "") {
label.classList.add('up')
} else {
label.classList.remove('up')
}
})
})
}
holdUp()