如何用Bookmarklet实现表单自动填充？解决无按键提交清空问题

这种情况大多是因为表单依赖前端交互事件（比如input、change或键盘事件）来标记输入内容为“有效”，而Bookmarklet直接赋值的操作没有触发这些事件，导致页面在提交时判定输入未完成，进而清空内容。以下是几种可行的解决办法：

• 触发输入框的原生事件
  自动赋值后手动触发input和change事件，让页面感知到输入已发生。示例代码：

  const input = document.getElementById('your-input-id');
  input.value = '要填充的内容';
  // 触发input事件，确保上层监听能捕获
  input.dispatchEvent(new Event('input', { bubbles: true }));
  // 按需触发change事件，适配表单逻辑
  input.dispatchEvent(new Event('change', { bubbles: true }));
  

• 模拟真实逐字符输入流程
  部分严格的页面会校验完整的输入交互链（按键按下、输入、松开），可以模拟整个手动输入过程：

  function simulateInput(element, text) {
    element.focus();
    element.value = '';
    for (let char of text) {
      element.dispatchEvent(new KeyboardEvent('keydown', { key: char }));
      element.value += char;
      element.dispatchEvent(new Event('input', { bubbles: true }));
      element.dispatchEvent(new KeyboardEvent('keyup', { key: char }));
    }
    element.dispatchEvent(new Event('change', { bubbles: true }));
    element.blur();
  }
  
  // 调用示例
  simulateInput(document.getElementById('your-input-id'), '要填充的内容');
  

  这种方式完全模拟手动操作，能绕过大部分基于交互的校验。

• 直接调用表单原生submit方法
  如果是表单的onsubmit钩子导致清空，可以跳过前端验证逻辑，直接调用表单的原生提交方法：

  const form = document.getElementById('your-form-id');
  // 先完成输入框填充并触发事件
  const input = form.querySelector('#your-input-id');
  input.value = '目标内容';
  input.dispatchEvent(new Event('input', { bubbles: true }));
  // 直接提交表单
  form.submit();
  

  注意：此方法会绕过前端验证，需确保填充内容符合后端校验规则。

• 延迟提交等待页面状态同步
  部分页面的表单监听逻辑是异步加载的，自动填充后立即提交可能赶不上页面状态更新，用setTimeout做延迟处理：

  // 完成输入框填充
  const input = document.getElementById('your-input-id');
  input.value = '目标内容';
  input.dispatchEvent(new Event('input', { bubbles: true }));
  // 延迟500ms提交，可根据页面实际调整时长
  setTimeout(() => {
    document.getElementById('your-form-id').submit();
  }, 500);
  

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