如何通过Tampermonkey编程填充带data-bind属性的input元素？

网页包含以下输入框元素：

<input data-bind="attr:{'id': field.name,
                  'name': field.name,
                  'type': field.type() || 'text',
                  'readonly': field.readonly() ? 'readonly' : null,
                  'autocomplete': params.withoutAutoFill ? 'off' : (params.autofill || '')},
            event:{'keypress':field.keypress, 'keyup':field.keyup, 'change': field.change, 'focusin': field.focusin},
            textInput: field.value" id="name" name="name" type="text" autocomplete="">

需通过Tampermonkey编程填充文本，尝试过以下方法均无效：

• 直接设置value属性：input_.setAttribute('value', 'some text'); —— 文本显示但提交时提示字段为空
• 模拟键盘事件：input_.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'})); —— 输入框无内容
• jQuery模拟键盘事件：$(input_).trigger(jQuery.Event('keydown', {keycode: keyCode}));

需求：如何填充文本，让网站判定为手动键盘输入？

这个输入框采用Knockout.js的textInput双向绑定，DOM元素的value与ViewModel中的可观察对象（Observable）关联，直接操作DOM或模拟普通事件无法同步ViewModel数据，导致验证不通过。

以下是可靠的解决方法：

方法一：直接操作ViewModel的可观察对象 #

1. 获取输入框元素：

const inputEl = document.getElementById('name');

2. 通过Knockout内置方法获取元素绑定的ViewModel：

const viewModel = ko.dataFor(inputEl);

3. 更新绑定的可观察对象值：

viewModel.field.value('你需要填充的文本内容');

方法二：结合DOM赋值与Knockout事件触发 #

如果无法直接获取ViewModel，可先更新DOM值，再触发Knockout监听的事件：

const inputEl = document.getElementById('name');
// 设置DOM的value属性
inputEl.value = '你需要填充的文本内容';
// 触发Knockout绑定的change事件，同步ViewModel
ko.utils.triggerEvent(inputEl, 'change');

注意事项 #

部分网站会混淆ViewModel变量名，若viewModel.field.value无法定位，可在浏览器开发者工具的Elements面板选中输入框，查看元素的__ko__属性，找到对应的可观察对象后再修改值。

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