通过绝对定位叠加层模拟可换行的占位符，用 替代原生 placeholder 属性，支持 white-space: pre-wrap 和垂直居中，兼顾美观性与表单控件对齐需求。
通过绝对定位叠加层模拟可换行的占位符，用 `` 替代原生 `placeholder` 属性，支持 `white-space: pre-wrap` 和垂直居中，兼顾美观性与表单控件对齐需求。
在标准 HTML 中，<input> 元素的 placeholder 属性不支持换行、多行显示或文本溢出控制——它始终以单行内联方式渲染，超出容器宽度时会被截断。当你需要展示较长提示语（如“Masukkan Kode Booking, contoh: XYBJLL”），又希望保持输入框紧凑尺寸（如 15rem × 3rem）且禁止使用 <textarea></textarea>（因其默认不支持与行内元素垂直对齐）时，推荐采用「视觉占位符覆盖法」：用一个带样式的 <span></span> 绝对定位覆盖在透明输入框上方，完全接管占位符的渲染逻辑。
以下是完整实现方案：
✅ 核心 HTML 结构
<div class="input-wrapper">
<input
class="form-control"
v-model="formData.booking_code"
id="bookingCodeInput"
/>
<span class="placeholder">Masukkan Kode Booking, contoh: XYBJLL</span>
</div>✅ 关键 CSS 样式
.input-wrapper {
position: relative;
width: 15rem;
height: 3rem; /* 注意：避免设为 15rem（过高），此处按实际输入高度调整 */
}
.form-control {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background: transparent;
border: 1px solid #ced4da; /* 可选：添加边框以保持视觉完整性 */
padding: 0.5rem;
box-sizing: border-box;
}
.placeholder {
position: absolute;
top: 0;
left: 0;
z-index: 1;
color: #aaa;
padding: 0.5rem;
pointer-events: none; /* 确保点击穿透到下方 input */
white-space: pre-wrap; /* 关键：允许空格和换行符生效，自动折行 */
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
align-items: center; /* 垂直居中（适用于单行或多行内容居中） */
line-height: 1.4; /* 提升可读性，避免行距过紧 */
}⚠️ 注意事项与增强建议
-
动态显隐逻辑：需配合 JavaScript/Vue 监听输入状态，在
formData.booking_code有值时隐藏.placeholder，为空时显示（Vue 中可用v-show="!formData.booking_code"）； -
无障碍访问（a11y）：原生
placeholder具备语义化支持，自定义方案需补充aria-hidden="true"到.placeholder，并确保<input>本身有aria-label或关联<label></label>； -
响应式适配：若容器宽度变化，
.placeholder会自动换行，但建议为.input-wrapper设置min-width防止极端压缩； -
字体一致性：
.placeholder应继承.form-control的font-family、font-size，推荐统一设置在.input-wrapper上。
该方案在保持 <input> 原生行为（如聚焦、键盘交互、表单验证、垂直对齐能力）的同时，彻底解除了占位符的排版限制，是现代表单设计中兼顾功能与体验的成熟实践。
