代码之家 › 专栏 › 技术社区 › Ceesiebird

如何基于下拉列表填充HTML页面中的用户名字段

tampermonkey html javascript

Ceesiebird · 技术社区 · 6 年前

我希望为测试人员创建一个工具,使他们的工作更容易一些。目前,他们有Excel工作表,其中列的名称可以理解,并映射到数字ID。

几次之后,这就变得相当乏味了。

我想为TamperMonkey制作一个JS脚本,根据下拉菜单填充登录页面上的用户名和密码字段(我无法编辑其中的源代码,因此我使用TamperMonkey),该下拉菜单向测试人员显示可理解的名称列表,并根据他们的选择使用正确的数字ID填充用户名字段。

我尝试了以下方法:

 $('#username').attr('value', '4000021865');
 $('#password').attr('value', 'Test');

但我在网上找不到任何关于TamperMonkey的下拉式野外种群的工作实例,我也不知道从哪里开始。

如果有人能给我指出正确的方向,我将不胜感激。

2 回复 | 直到 6 年前

Ceesiebird 6 年前

我已经找到了一个模板,我可以重复使用,这正是我需要的。

 // ==UserScript==
 // @name        facebook login
 // @namespace   http://123.123
 // @include     https://www.facebook.com/*
 // @version     1
 // @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
 // @require     http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
 // @resource    bt 
 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
 // @resource    bt-theme 
 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
 // @grant       GM_addStyle
 // @grant       GM_getResourceText
 // ==/UserScript==
(function() {
if ($('#login_form').length <= 0) {
    console.log('No login_form');
    return;
}

GM_addStyle(GM_getResourceText("bt"));
GM_addStyle(GM_getResourceText ("bt-theme"));
GM_addStyle("#menu1 a {text-align: left}");
var $loginbutton = $('#loginbutton');
var menu = '<span class="dropdown btn btn-primary" style="padding: 2px; margin: 0 0 0 5px;">' +
           '<a id="drop4" href="#" data-toggle="dropdown" role="button" style="color: #FFF">User Selection ' +
           '<b class="caret"></b>' +
           '</a>' +
           '<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4" role="menu">' +
           '<li>' +
           '<a href="#" role="menuitem">kaoyenchi</a>' +
           '</li>' +
           '<li>' +
           '<a href="#" role="menuitem">tcyc</a>' +
           '</li>' +
           '<li>' +
           '<a href="#" role="menuitem">fcwu</a>' +
           '</li>' +
           '</ul>' +
           '</span>'
$loginbutton.parent().append(menu);
var accounts = {};
accounts['fcwu'] = ['', ''];
accounts['kaoyenchi'] = ['', ''];
accounts['tcyc'] = ['', ''];
accounts['timy'] = ['', ''];
$('#menu1 a').click(function() {
    name = $(this).text()
    $('#email').attr('value', accounts[name][0]);
    $('#pass').attr('value', accounts[name][1]);
    $('#login_form').submit();
});

})();

Georgy 6 年前

如果是 <select> 有许多 <options> 你也可以这样做。 $('#selectId').attr('value', 'optionValue');

例子: http://jsfiddle.net/g689n1d2/