Html 当用户键入内容时，如何在输入中插入单词

我正在尝试浮动一个标签，它运行良好。当用户专注于输入并键入内容时，标签文本粘贴在上方，当用户单击下一个字段时，输入文本消失，标签文本放置在输入中。我需要检查是否有人键入我想粘贴上面的浮动标签字。我会附上小提琴链接，请检查。我会非常感激你的帮助

谢谢

---

因此，问题是标签充当占位符，并且明显地浮动回其位置

我建议您执行以下操作，而不是将标签用作占位符并将其浮动：

当用户键入标签时，将标签放在应该的位置（在字段上方），并使用CSS（可见性或不透明度）将其隐藏

作为占位符使用正确的占位符：

<input type="text" placeholder="First Name"/>

---

一旦用户点击该字段，只需更改标签的可见性/不透明度，使其可见。当HTML为您提供占位符时，为什么要使用元素作为占位符？

在输入字段中添加所需属性，并添加这行代码是css

输入：有效+标签{ 顶部：-10px }

.content{
左边距：50像素；
位置：绝对位置；
顶部：100px；
}
.新形式{
背景色：#fff；
}
.newForm输入{
宽度：“100%”；
填充：10px；
}
.newForm输入：焦点+标签{
颜色：#0f73ee；
字体大小：12px！重要；
顶部：-10px；
}
.newForm输入：焦点+标签：之后{
内容：“：”；
}
.newForm输入：非（：焦点）{
内容：“：”；
}
.新表格标签{
位置：绝对位置；
顶部：12px；
左：25px；
颜色：#777；
字体大小：0.9rem；
背景：#fff；
过渡：0.2s；
}
输入：有效+标签{
顶部：-10px；
}

新标题
名字

如果您需要帮助或示例，我可以为您提供我的解决方案的代码，我只希望给出解释，以便您可以首先自己修复：）谢谢您的回答，您可以编辑fiddle吗？或者给出任何示例实际上，当用户在输入中键入内容或文本时，我希望保留标签文本。现在，当我移动到下一个字段时，它会隐藏标签文本。在用户键入内容后，您希望标签保持不变吗？

<input type="text" placeholder="First Name"/>