Vuetify Textarea粘贴后失焦，浮动标签无法复位问题求助

问题原因 #

直接通过DOM修改Textarea的value属性时，未触发Vuetify内部监听的input事件，组件无法感知内容变化，导致失焦后浮动标签状态未更新，出现重叠。

解决方法 #

方法1：优先操作Vue响应式数据（推荐） #

如果Textarea使用v-model绑定了响应式变量（Vue2的data或Vue3的ref），直接修改该变量而非DOM元素：

// Vue3示例：假设绑定的响应式变量为textareaValue
const textareaValue = ref('');

const textAreaPaste = (e: ClipboardEvent) => {
  e.preventDefault();
  const clipboardData = e.clipboardData;
  const pastedData = clipboardData ? clipboardData.getData("Text") : "";
  const formattedText = pastedData.replace(/\r(?!\n)|\n(?!\r)/g, "\n");
  
  let newVal = '';
  const target = e.target as HTMLTextAreaElement;
  if (target.selectionStart !== undefined) {
    const startPos = target.selectionStart;
    const endPos = target.selectionEnd;
    newVal = target.value.substring(0, startPos) + formattedText + target.value.substring(endPos);
  } else {
    newVal = formattedText;
  }
  
  // 截断到最大长度并更新响应式变量
  textareaValue.value = newVal.length > maxAnnoLetter ? newVal.substr(0, maxAnnoLetter) : newVal;
  
  // 计算剩余字符
  const id = (e.target as HTMLInputElement).id;
  if (id) {
    setTimeout(() => {
      calcRemainingChars(id, textareaValue.value);
    }, 250);
  }
};

方法2：手动触发input事件（兼容直接操作DOM场景） #

若必须直接修改DOM的value，赋值后手动触发input事件，让Vuetify感知内容变化：

const textAreaPaste = (e: ClipboardEvent) => {
let clipboardData, pastedData;
let textResult = "";
const target = e.target as HTMLTextAreaElement;

if (e) {
    e.preventDefault();
    nextTick(() => {
        clipboardData = e.clipboardData;
        pastedData = clipboardData ? clipboardData.getData("Text") : "";

        const t1 = pastedData.replace(/\r(?!\n)|\n(?!\r)/g, "\n");

        if (target.selectionStart || String(target.selectionStart) === "0") {
            var startPos = target.selectionStart;
            var endPos = target.selectionEnd;
            textResult = target.value.substring(0, startPos) + t1 + target.value.substring(endPos, target.value.length);
        } else {
            textResult += t1;
        }
        
        const targetEl = e.target as HTMLInputElement;
        targetEl.value = textResult.length > maxAnnoLetter ? textResult.substr(0, maxAnnoLetter) : textResult;
        // 关键：触发input事件同步Vuetify标签状态
        targetEl.dispatchEvent(new Event('input'));
        
        const id = targetEl.id;
        if (id) {
            setTimeout(() => {
                calcRemainingChars(id, textResult);
            }, 250);
        }
    });
}
};

原理说明 #

Vuetify的浮动标签逻辑依赖于对输入框value的监听，Vue响应式更新和Vuetify状态同步都需要通过标准input事件触发。直接修改DOM的value不会触发该事件，导致标签状态未同步；手动触发事件或修改响应式数据，能让组件正确检测内容变化，失焦时自动将标签移至输入框上方。

内容的提问来源于stack exchange，提问作者Norm Strassner