通过 CSS 定位与 white-space: pre-wrap 配合，用覆盖层模拟可换行的 placeholder，既保持输入框原生行为，又支持垂直居中和自动折行。
通过 css 定位与 white-space: pre-wrap 配合，用覆盖层模拟可换行的 placeholder，既保持输入框原生行为，又支持垂直居中和自动折行。
在标准 <input> 元素中，原生 placeholder 属性不支持换行（\n 被忽略），且无法控制文本排版（如行高、对齐、折行）。当占位提示语较长（如“Masukkan Kode Booking, contoh: XYBJLL”）而输入框高度较大时，单行 placeholder 易被截断或溢出。此时，不推荐强行修改 input 的 placeholder 行为，而应采用语义清晰、样式可控的「视觉模拟方案」：使用绝对定位的覆盖层 <span></span> 替代 placeholder。
具体实现如下：
-
结构封装：将
<input>和占位<span></span>包裹在.input-wrapper容器中，启用相对定位； -
输入框样式：设置
position: absolute; z-index: 2; background: transparent;，使其透出下层文字，同时保留所有交互能力（聚焦、输入、v-model 绑定等）； -
占位层样式：
-
z-index: 1确保位于 input 下方但可见； -
white-space: pre-wrap启用空格保留 + 自动换行； -
display: flex; align-items: center;实现垂直居中（兼容多行）； -
pointer-events: none避免遮挡输入焦点； -
padding提供内边距，确保文字不贴边。
-
<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,<br>contoh: XYBJLL</span> </div>
.input-wrapper {
position: relative;
width: 15rem;
height: 3rem;
}
.form-control {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background: transparent;
border: 1px solid #ccc;
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;
white-space: pre-wrap;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
align-items: center;
font-size: 0.875rem;
line-height: 1.4;
}
✅ 优势总结：
- 完全兼容 Vue/React 等框架的双向绑定（
v-model不受影响）； - 支持任意长度占位文本自动折行与垂直居中；
- 保留原生
<input>的键盘导航、移动端软键盘触发等行为； - 可自由定制字体、颜色、行高、动画等样式。
⚠️ 注意事项：
- 若 input 有
border或border-radius，需同步应用到.input-wrapper或调整.form-control的box-sizing； - 当 input 获取焦点或已有值时，应通过 JS 或 CSS 类动态隐藏
.placeholder（例如监听focus/input事件并切换opacity: 0或visibility: hidden）； - 不建议在
<textarea></textarea>场景下使用此方案——此时应直接使用<textarea></textarea>的原生换行能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
