没有 id tampermonkey 的自动填写表单

Question

我是 tampermonkey 的新手，我想自动填写表格但没有 ID ...我已经尝试了一些代码但没有用

来源

<input type="text" name="user_email" class="form-control-input" value="" placeholder="Enter your Email" onselectstart="return false" onpaste="return false;" oncopy="return false" oncut="return false" ondrag="return false" ondrop="return false" autocomplete="off">

代码已经测试

  var mail = "test@gmail.com";
  document.getElementsByClassName('form-control-input').value = mail;

Answer 1

我个人更喜欢在 tampermonkey 中使用 jQuery 而不是纯 javascript，因为它给了我更多的控制权，例如在 DOM 准备就绪时加载脚本。即将函数包装在 $(document).ready(function() ...

您可以尝试一下（确保更改@match）

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        <your site here>
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.
// @grant        none
// @require http://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==

(function() {
    'use strict';

    $(document).ready(function() {
        var mail = "test@gmail.com";
        $('[name=user_email]').val(mail);
    });
})();

Answer 2

将 class 更改为 id 或 querySelector。使用 getElementsByClassName() 将 return 一个 NodeList 的集合。所以在这个例子中考虑一个数组。如果你使用 getElementsByClassName() 你是在告诉 DOM “嘿，我想做很多事情” 所以为了添加 string 值 " 这些东西的数量"，你需要一个一个地检查它们并给它们 value 即你需要循环遍历这个 NodeList 并执行什么你想要“这些东西”。

何时使用 getElementsByClassName

在你的情况下，因为你只处理一个输入，所以 select 使用 id 更容易。如果你说 10 个不同的 input 字段你需要使用 prefill 然后使用 getElementsByClassName() 但如果你只有 2 或 3 个字段我建议只给每个字段一个独特的 id 并使用那个

  var mail = "test@gmail.com";
  document.getElementById('form-control-input').value = mail

<input type="text" name="user_email" id="form-control-input" value="" placeholder="Enter your Email" onselectstart="return false" onpaste="return false;" oncopy="return false" oncut="return false" ondrag="return false" ondrop="return false" autocomplete="off">

没有 id tampermonkey 的自动填写表单

auto fill form without id tampermonkey

javascript

tampermonkey