编程填充textarea后Chatbot发送按钮无法点击的技术咨询

问题根源在于：直接通过inputField.value = quote修改文本框值时，没有触发页面监听的输入事件。很多现代网站（尤其是基于React、Vue等框架开发的）会依赖input、keyup这类事件检测内容变化，进而更新内部状态、启用发送按钮。直接修改value属性不会触发这些事件，导致按钮始终处于禁用状态。

修改方案 #

在设置文本框值后，手动触发input事件，模拟用户输入行为，让页面检测到内容变化：

const getNewQuote = async () => {
    // 获取输入框和发送按钮
    const inputField = document.getElementsByClassName("bot-textarea")[0];
    const sendbtn = document.querySelectorAll('[aria-label="Send"]')[0];
   
    // 获取随机名言
    const url = "https://type.fit/api/quotes";
    const response = await fetch(url);
    const allQuotes = await response.json();
    const indx = Math.floor(Math.random() * allQuotes.length);
    const quote = allQuotes[indx].text;

    // 设置值并触发输入事件
    inputField.value = quote;
    inputField.dispatchEvent(new Event('input', { bubbles: true }));
    sendbtn.click();
}

备选方案 #

如果input事件无效，可以尝试触发其他事件：

• 触发change事件：

  inputField.dispatchEvent(new Event('change', { bubbles: true }));
  

• 模拟键盘按键事件：

  inputField.dispatchEvent(new KeyboardEvent('keyup', { key: 'a', bubbles: true }));
  

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