使用CSS和JavaScript在输入焦点上设置标签动画

我有几个输入字段，我希望它们的标签缩小，并在焦点的顶部滑动。我已经设法用CSS和JavaScript实现了这一点，但它只为页面上的第一个标签设置动画

下面的代码JS使用“querySelector”以标签为目标。我还尝试过使用“getElementsByClassName”和“querySelectorAll”。当我只关注一个输入字段时，它会为页面上的所有标签设置动画

我只想设置附加到输入的标签的动画。在此方面的任何帮助都将不胜感激

document.addEventListener（“更改”，函数（事件）{
if（event.target&&event.target.matches（“.js_表单输入”））{
event.preventDefault（）；
var inputField=event.target；
var inputLabels=document.querySelector（“.label span”）；
if（inputField.value）{
inputLabels.style.top=“-1.5rem”；
}否则{
inputLabels.style.top=“0rem”；
}
}
});
.input{
宽度：100%；
边界：0；
边框底部：实心1px灰色；
左：1rem；
边缘底部：2rem；
颜色：$c_pop；
垫底：0.7rem；
}
.输入标签{
位置：相对位置；
}
.标签跨度{
位置：绝对位置；
排名：0；
左：1rem；
过渡：均为0.2s；
}
.输入标签{
字体大小：0.9rem；
}
.输入：焦点+.标签范围{
顶部：-1.5雷姆；
左：0.5雷姆；
字体大小：0.7rem；
}

名字
姓
电子邮件
您的CSS足以获得您想要的效果，只需删除javascript即可。我修复的唯一问题是添加
指针事件：无
指向
.label span
元素，因为单击这些元素时它们会阻塞焦点

编辑以包括对输入是否为空的模糊检查，并在输入为满时保持标签位置


const inputs=document.querySelectorAll（'.js_form-input'）；
inputs.forEach（输入=>{
input.addEventListener（'blur'，（事件）=>{
if（event.target.value.length）{
event.target.classList.add（“完整”）；
}否则{
event.target.classList.remove（“完整”）；
}
});
})
#容器{
填充：2rem0；
}
.输入{
宽度：100%；
边界：0；
边框底部：实心1px灰色；
左：1rem；
边缘底部：2rem；
颜色：$c_pop；
垫底：0.7rem；
}
.输入标签{
位置：相对位置；
}
.标签跨度{
位置：绝对位置；
排名：0；
左：1rem；
过渡：均为0.2s；
指针事件：无；
}
.输入标签{
字体大小：0.9rem；
}
.input:焦点+.label span、.input.full+.label span{
顶部：-1.5雷姆；
左：0.5雷姆；
字体大小：0.7rem；
}

名字
姓
电子邮件
我希望这能解决您的问题。


var myform=document.queryselectoral（“.input label”）；
Array.from（myform.map）（x=>{
x、 addEventListener（'change'，（e）=>{
var el=e.target.parentNode.children[1]；
如果（例如，target.value！==“”）{
el.style.top=“-1.5rem”；
}否则{
el.style.top=“0rem”；
}
});
});
*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
}
.输入容器{
填充：20px；
}
.输入{
宽度：100%；
边界：0；
边框底部：实心1px灰色；
左：1rem；
边缘底部：2rem；
颜色：#000；
垫底：0.7rem；
}
.输入标签{
位置：相对位置；
}
.标签跨度{
位置：绝对位置；
排名：0；
左：1rem；
过渡：均为0.2s；
}
.输入标签{
字体大小：0.9rem；
}
.输入：焦点+.标签范围{
顶部：-1.5雷姆；
左：0.5雷姆；
字体大小：0.7rem；
}

名字
姓
电子邮件
无需Javascript即可获得相同结果的另一个技巧。


*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：无衬线；
}
.输入容器{
填充：20px；
}
.输入{
宽度：100%；
边界：0；
边框底部：实心1px灰色；
左：1rem；
边缘底部：2rem；
颜色：#000；
垫底：0.7rem；
}
.输入标签{
位置：相对位置；
}
.标签跨度{
位置：绝对位置；
排名：0；
左：1rem；
过渡：均为0.2s；
}
.输入标签{
字体大小：0.9rem；
}
.输入：焦点+.标签范围，
.输入：有效+.标签范围{
顶部：-1.5雷姆；
左：0.5雷姆；
字体大小：0.9rem；
}

文件
名字
姓
电子邮件
您做得很好，但在css中，您没有正确定义类名。在css中使用点（.）和所有类名，我认为这不需要任何javascript。删除javascript代码。我希望，它能解决你的问题。这是编辑问题时的一个打字错误。我已经改正了。该问题仍然存在。@当任何输入失去焦点且其值不是空字符串时，需要KumarGaurav javascript来保持标签不变。@Yousaf不确定，您可以在没有JS的情况下获得相同的结果。你可以看到我的第二种方法。请告诉我，如果我遗漏了任何拐角处的情况。@KumarGaurav使用
必需的
属性和
：有效的
选择器将不起作用，如果