通过绝对定位叠加层模拟多行占位符，解决原生 的 placeholder 溢出截断问题，兼顾垂直居中与响应式换行。
通过绝对定位叠加层模拟多行占位符，解决原生 `` 的 placeholder 溢出截断问题，兼顾垂直居中与响应式换行。
在 HTML 表单开发中，原生 <input type="text"> 的 placeholder 属性不支持换行（<br> 无效），且当容器高度较大、文字较长时，文本会因 white-space: nowrap 默认行为而溢出或被裁剪。虽然 <textarea></textarea> 天然支持多行占位符，但其默认垂直对齐方式与 input 不一致，且难以精确匹配单行表单控件的视觉节奏与交互预期。
一种优雅的解决方案是：用语义化结构替代原生 placeholder 行为——即通过包裹容器（.input-wrapper）将 <input> 与独立的占位符 <span></span> 进行层叠定位，使后者承担可换行、可样式化、可居中的“伪 placeholder”职责。
以下为完整实现：
<div class="input-wrapper"> <input class="form-control" style="width: 15rem; height: 3rem;" v-model="formData.booking_code" id="bookingCodeInput"><span class="placeholder">Masukkan Kode Booking, contoh: XYBJLL</span> </div>
对应 CSS 需确保：
-
.input-wrapper设为position: relative，作为定位上下文； -
<input>设置position: absolute、z-index: 2，并设background: transparent以透出下方占位符（同时保留用户输入可见性）； -
.placeholder使用position: absolute、z-index: 1，配合white-space: pre-wrap实现自然换行，display: flex+align-items: center确保垂直居中，pointer-events: none避免遮挡输入焦点； - 注意：
height建议统一设为合理值（如3rem），避免过度拉伸（原文中15rem高度明显异常，易导致布局断裂）。
✅ 关键优势：
- 占位符完全可控：支持换行、富文本样式、字体大小/颜色微调；
- 输入体验无损：
v-model绑定、键盘交互、聚焦状态均不受影响； - 垂直对齐精准：Flex 布局确保多行文本在容器内居中；
- 兼容性强：无需 JS，纯 CSS + HTML 即可工作。
⚠️ 注意事项：
- 当
input获得焦点或已有值时，应动态隐藏.placeholder（推荐用 Vue 的v-show="!formData.booking_code"或原生 JS 监听input/focus事件）； - 若需支持无障碍访问（a11y），建议为占位符添加
aria-hidden="true"，并确保input具备明确的label或aria-label； - 避免在
.placeholder中使用contenteditable或其他交互属性，以防意外触发编辑行为。
该方案在保持简洁性的同时，突破了原生 input 的表现限制，是构建专业级表单体验的实用技巧。
