H5中实现浮动标签效果需用label包裹input并嵌套span文案，CSS通过:focus-within和has-value类控制绝对定位+transform上浮，JS监听input/blur事件维护输入状态，兼顾可访问性与移动端适配。
在 H5 页面中实现“输入框获得焦点时提示文案上浮为悬浮标签”（即 Floating Label 效果），核心是利用 CSS 的 :focus 伪类 + transform 或 position 变化，配合 HTML 结构合理组织 label 和 input 关系。不需要 JS 也能完成基础效果，但要兼容「已输入内容但未聚焦」的场景，建议加少量 JS 监听 input 事件做状态管理。
结构：用 <label> 包裹 <input>，文案放在 <span> 中
推荐语义化、可访问性好的写法：
<label class="floating-label"> <input type="text" name="username" autocomplete="off"> <span class="label-text">用户名</span> </label>
这样 label 点击可自动聚焦 input，且 screen reader 能正确关联。避免把 label 放在外面再用 for/id 绑定——不利于 CSS 精确控制浮动逻辑。
CSS 实现：绝对定位 + transform 上浮 + 过渡动画
关键点：
-
.label-text默认绝对定位在 input 内部左上角，字体小、颜色浅 - input 聚焦或有内容时，通过
:focus-within（父级 label）或 JS 添加 class 触发transform: translateY(-20px) - 加
transition让上浮更自然
示例 CSS：
.floating-label {
position: relative;
display: block;
}
.floating-label input {
width: 100%;
padding: 12px 8px 4px;
font-size: 16px;
border: 1px solid #ccc;
background: none;
}
.label-text {
position: absolute;
top: 12px;
left: 8px;
font-size: 16px;
color: #999;
pointer-events: none;
transition: all 0.2s ease;
}
.floating-label:focus-within .label-text,
.floating-label.has-value .label-text {
font-size: 12px;
color: #333;
transform: translateY(-16px);
background: #fff;
padding: 0 4px;
}
注意：background: #fff 和 padding 是为了遮挡 input 边框穿出的文字，视觉更干净。
JS 补充：监听输入并标记 has-value 状态
仅靠 :focus-within 无法判断「失去焦点但已有内容」的情况，所以需 JS 监听 input 事件：
document.querySelectorAll('.floating-label input').forEach(input => {
const label = input.parentElement;
const updateState = () => {
label.classList.toggle('has-value', input.value.trim() !== '');
};
input.addEventListener('input', updateState);
input.addEventListener('blur', updateState); // blur 时也检查一次，防空格残留
});
这样用户输入后即使移开焦点，标签仍保持上浮状态，体验更符合预期。
移动端适配要点
H5 在 iOS/Android 上要注意：
- 移除默认聚焦时的高亮边框：
input:focus { outline: none; }，但请用box-shadow或 border 替代以保可访问性 - iOS Safari 对
:focus-within支持良好（iOS 13.4+），旧版本可降级为 JS 控制focused类 - 避免 label 文字过小（小于 14px），确保触控易读；上浮位移量建议不小于 12px，保证与 input 文字不重叠
