Vue生成页面中向textarea触发按键事件并启用发送按钮的问题

问题根源 #

Vue是数据驱动框架，直接修改DOM的textContent或移除按钮disabled属性不会同步更新Vue内部的响应式状态，所以按钮仍会保持禁用状态。必须模拟真实用户输入行为，触发Vue监听的事件来同步数据。

原生JS实现步骤 #

1. 正确设置textarea内容并触发同步事件 #

textarea的内容存储在value属性而非textContent，同时需要触发Vue监听的input/change事件来更新内部数据：

// 精准获取目标textarea（用类名避免误选）
const textarea = document.querySelector('.index_textarea_1O4S1');
if (textarea) {
  // 设置输入内容
  textarea.value = "hello there";
  
  // 触发input事件（Vue核心监听事件）
  textarea.dispatchEvent(new Event('input', { bubbles: true }));
  
  // 可选：补充触发change事件，适配部分场景
  textarea.dispatchEvent(new Event('change', { bubbles: true }));
}

2. 触发发送按钮点击 #

注意原按钮标签是<btn>而非<button>，需修正选择器；等待Vue更新按钮状态后，模拟真实点击流程：

const sendBtn = document.querySelector('btn');
if (sendBtn && !sendBtn.disabled) {
  // 模拟完整点击流程：mousedown → mouseup → click
  sendBtn.dispatchEvent(new Event('mousedown', { bubbles: true }));
  sendBtn.dispatchEvent(new Event('mouseup', { bubbles: true }));
  sendBtn.click();
}

关键补充 #

若按钮仍未启用，可短暂延迟后再尝试点击，给Vue足够的状态更新时间：

setTimeout(() => {
  const sendBtn = document.querySelector('btn');
  if (sendBtn && !sendBtn.disabled) {
    sendBtn.click();
  }
}, 100);

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