如何实现 HTML 输入框中多行自适应占位符文本-js教程-PHP中文网

如何实现 HTML 输入框中多行自适应占位符文本

通过 CSS 定位与 white-space: pre-wrap 技术，将占位符文本以独立元素覆盖在输入框上，实现自动换行、垂直居中且不干扰表单交互的优雅方案。

通过 css 定位与 white-space: pre-wrap 技术，将占位符文本以独立元素覆盖在输入框上，实现自动换行、垂直居中且不干扰表单交互的优雅方案。

在标准 <input> 元素中，原生 placeholder 属性不支持换行（即使插入 \n 或使用 <br> 也无效），且当输入框高度较大、宽度受限时，长占位符文字极易被截断，影响可读性与用户体验。若直接改用 <textarea></textarea>，虽支持多行，但会丧失 <input type="text"> 的语义性、默认样式一致性及垂直对齐控制能力（尤其在 Flex/Grid 布局中）。

推荐采用「伪占位符」方案：用一个绝对定位的 <span></span> 覆盖在 <input> 上，模拟占位符行为。该方案完全保留 <input> 的功能与对齐特性，同时赋予占位符完整的 CSS 控制权。

✅ 核心实现要点：

使用 position: relative 包裹容器，为内部绝对定位提供参考；
<input> 设置 position: absolute + z-index: 2，确保可交互且覆盖底层；
占位符 <span></span> 设置 z-index: 1、pointer-events: none（避免遮挡点击）、white-space: pre-wrap（保留空格并自动换行）；
利用 display: flex + align-items: center 实现垂直居中（无需计算行高或 padding）；
添加 padding 保证内边距一致性，并通过 overflow: hidden 防止内容溢出。

以下是完整可复用代码示例：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

<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 #ced4da;
  border-radius: 0.375rem;
  padding: 0.5rem;
  font-size: 1rem;
}

.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;
  line-height: 1.4;
}

⚠️ 注意事项：

当用户开始输入时，需通过 JS 动态隐藏 .placeholder（例如监听 input/focus 事件）；
若使用 Vue，建议结合 v-show 或 :class 控制显示状态（如 :class="{ 'placeholder-hidden': formData.booking_code }"）；
确保 .form-control 的 background 设为 transparent，避免遮盖占位符；
如需响应式适配，可将 width/height 改为 min-width/min-height 并配合 max-width 控制。