實(shí)現(xiàn)效果

• 當(dāng)可編輯區(qū)域內(nèi)容為空時(shí)，顯示 data-placeholder 的提示文本（灰色）；
• 輸入內(nèi)容后，提示文本自動(dòng)隱藏；
• 清空內(nèi)容（包括空格）后，提示文本重新顯示。

contenteditable="true" 的元素添加 placeholder 的交互.gif

源碼

<template>
  <div
    <div 
      ref="editRef" 
      class="edit-content" 
      contenteditable="true"
      data-placeholder="請(qǐng)?jiān)诖溯斎雰?nèi)容..."
    ></div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const editRef = ref<HTMLDivElement>(null);

  const handleInput = () => {
    const editableElement = editRef.value;
    if (!editableElement) return;

    const isEmpty = editableElement.textContent === '';
    // 通過(guò) CSS 類控制占位符顯隱（可選）
    editableElement.classList.toggle('empty', isEmpty);
  };

  onMounted(() => {
    editRef.value?.addEventListener('input', handleInput);

    // 初始狀態(tài)檢查
    handleInput();

    editRef.value?.focus();
  });

  // 卸載時(shí)移除事件監(jiān)聽
  onUnmounted(() => {
    editRef.value?.removeEventListener('input', handleInput);
  });
</script>

<style scoped lang="less">
  .edit-content {
    /* 默認(rèn)樣式 */
    min-height: 200px;
    padding: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    position: relative;

    /* 占位符樣式（內(nèi)容為空時(shí)顯示） */
    &.empty::before {
      content: attr(data-placeholder); /* 讀取 data-placeholder 內(nèi)容 */
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      color: #bfbfbf; /* 灰色提示 */
      pointer-events: none; /* 防止點(diǎn)擊選中提示文本 */
    }
  }
</style>