无法通过浏览器控制台修改或填充HTML input标签的value属性

问题场景 #

通过浏览器控制台执行以下代码修改input内容时，文本仅短暂显示后就消失：

var k = document.getElementsByClassName("persist writer-input")[0]; 
k.value = "My text value"

对应页面DOM结构：

<form class="connected writer" data-v-98381900>
    <span class="writer-room"
        data-v-98381900>Lounge
    </span>
    <input
        maxlength="500" class="persist writer-input" placeholder="Type to chat, or drop an image to share" type="search"
        data-v-98381900>
</form>

手动键盘输入时内容正常保存，仅控制台操作出现此问题。

原因分析 #

页面使用了Vue这类响应式前端框架（从data-v-xxx属性可判断），框架通过监听**输入事件（如input、keyup）**同步DOM内容与内部响应式数据。直接修改DOM的value属性不会触发这些事件，导致框架内部数据未更新。当框架触发重新渲染时，会将input的value重置为内部数据的原值，所以内容会消失。

解决方案 #

修改value后，手动触发input事件，让框架感知到内容变化并同步数据：

// 获取输入框元素
const inputEl = document.querySelector(".persist.writer-input");
// 设置内容
inputEl.value = "My text value";
// 触发input事件（bubbles: true确保事件能被框架的事件监听器捕获）
inputEl.dispatchEvent(new Event('input', { bubbles: true }));

如果上述方法无效，可尝试补充触发change事件：

// 额外触发change事件
inputEl.dispatchEvent(new Event('change', { bubbles: true }));

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