在AngularJS站点用Tampermonkey触发keydown时保留输入框预填值

嘿，这个问题我之前处理过类似的，AngularJS的双向绑定经常会在这种场景下搞点小麻烦！让我给你捋清楚怎么解决。

问题根源 #

你遇到的覆盖问题，本质是AngularJS的ngModel没有同步你手动设置的输入框值。当你直接修改input的value时，Angular并不知道这个变化——它只认自己的双向绑定机制。所以当你触发keydown事件时，Angular会把它内部模型里的旧值（大概率是空的）重新同步回输入框，就把你的预填内容覆盖了。

解决方案步骤 #

核心思路是：先确保预填值同步到Angular的模型中，再触发keydown事件，同时阻止空格键的默认行为避免修改输入框内容。

这里给你一个可直接复用的Tampermonkey脚本示例，我会标注关键部分：

// ==UserScript==
// @name         AngularJS 预填搜索并触发
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  预填搜索框并触发搜索，不覆盖预填值
// @author       You
// @match        你的目标站点URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 用setTimeout等待页面加载（如果页面加载慢，也可以换成MutationObserver更可靠）
    setTimeout(function() {
        // 替换成你目标输入框的选择器，比如#search-input或者[ng-model="search.query"]
        const searchInput = document.querySelector('YOUR_INPUT_SELECTOR');
        if (!searchInput) return;

        // 1. 预填内容
        const prefillText = '你的预填关键词';
        searchInput.value = prefillText;

        // 2. 关键步骤：同步Angular的ngModel模型
        // 方法一：触发input事件，让Angular感知值变化（推荐优先用这个）
        searchInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

        // 方法二：如果方法一无效，直接获取ngModel控制器强制同步
        // const ngModelCtrl = angular.element(searchInput).controller('ngModel');
        // if (ngModelCtrl) {
        //     ngModelCtrl.$setViewValue(prefillText);
        //     ngModelCtrl.$render();
        // }

        // 3. 触发空格键keydown事件，但阻止默认行为避免添加空格
        const spaceKeyEvent = new KeyboardEvent('keydown', {
            key: ' ',
            code: 'Space',
            keyCode: 32,
            bubbles: true,
            cancelable: true
        });

        // 只监听一次keydown事件，阻止默认行为
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === ' ') {
                e.preventDefault(); // 阻止添加空格，同时避免Angular回写旧值
                // 可选：如果搜索逻辑是绑定在scope上的函数，也可以直接调用
                // angular.element(searchInput).scope().triggerSearch();
            }
        }, { once: true });

        // 触发事件
        searchInput.dispatchEvent(spaceKeyEvent);
    }, 2000); // 延迟时间根据页面实际加载情况调整
})();

关键细节解释 #

1. 同步Angular模型：

   • 触发input事件是Angular监听输入框变化的标准方式，会自动更新ngModel对应的模型值。
   • 如果input事件无效，再用ngModel控制器的$setViewValue和$render方法强制同步，这是更底层的操作。

2. 阻止空格键默认行为：

   • 给输入框添加一次性的keydown监听，当检测到空格键时调用e.preventDefault()，这样既触发了搜索所需的keydown事件，又不会在输入框里添加空格，也避免了Angular因为事件触发而回写旧值。

3. 更可靠的页面加载检测：

   • 如果setTimeout的延迟时间不好控制，你可以换成MutationObserver来监听输入框的出现，这样能在输入框加载完成后立即执行操作，比固定延迟更准确。

内容的提问来源于stack exchange，提问作者Michael Krøyserth-Simsø