通过JS设置Tinder网页textarea值后发送按钮未启用的问题排查

Tinder网页端基于现代前端框架（大概率是React）构建，这类框架不会直接监听DOM元素的value属性变更，而是依赖用户交互触发的事件（如input、change）来同步内部状态：

• 手动输入内容时，浏览器会自动触发input事件，框架捕获到后更新状态，进而启用发送按钮；
• 直接通过JS修改value属性属于纯DOM操作，不会触发任何事件，框架无法感知值的变化，因此发送按钮保持禁用；
• 你尝试的defaultValue、innerHTML、text属性，要么是元素的初始值，要么是DOM节点的静态内容，都不属于框架跟踪的用户输入状态，所以无效。

修改value后手动触发框架监听的事件即可，优先用input事件（最贴近用户真实输入行为）：

方案1：触发input事件（推荐） #

const textarea = document.querySelector("#c-582094868");
textarea.value = 'my message';
// 触发冒泡的input事件，确保框架能捕获到
textarea.dispatchEvent(new Event('input', { bubbles: true }));

方案2：触发change事件（方案1无效时尝试） #

const textarea = document.querySelector("#c-582094868");
textarea.value = 'my message';
textarea.dispatchEvent(new Event('change', { bubbles: true }));

方案3：模拟真实按键输入（极端情况备用） #

如果前两种方法都不生效，可以模拟逐个字符输入的完整流程：

const textarea = document.querySelector("#c-582094868");
const message = 'my message';

textarea.value = '';
textarea.focus();

for (const char of message) {
    // 模拟按键按下、输入、按键抬起的完整流程
    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
    textarea.value += char;
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
    textarea.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
}

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