如何在Bookmarklet中匹配带随机整数的ID？解决表单填充失效问题

问题 #

使用表单填充书签脚本时，用户名输入框（固定ID identification）可正常填充，但密码框ID为动态生成的emberXXX格式（XXX是随机三位数），刷新或重新访问网站后ID会变化，导致脚本仅能生效一次。

解决思路 #

放弃通过固定ID定位密码框，改用稳定的属性特征定位：

• 优先使用密码框的type="password"属性，这是密码输入框的标准属性，一般不会变化。
• 如果页面存在多个密码框，可结合ID前缀正则匹配（id^="ember"）进一步缩小范围。

修改后的代码 #

普通JavaScript版本 #

var d = document;

function i(a) {
    return d.getElementById(a)
}

function n(a) {
    return d.getElementsByName(a)[0]
}

function e(a) {
    t = 'change';
    if (window.navigator.userAgent.match(/Trident|MSIEs/g) != null) {
        x = d.createEvent('Events');
        x.initEvent(t, 1, 0);
    } else {
        x = new Event(t);
    }
    a.dispatchEvent(x);
}

function v(a, v) {
    a.value = v;
    e(a)
}

function c(a) {
    a.checked = true;
    e(a)
}

// 填充固定ID的用户名框
v(i("identification"), "UsernameForLogin");

// 定位密码框：单密码框场景用这个
var passwordInput = d.querySelector('input[type="password"]');

// 多密码框场景，改用下面这行（匹配ID以ember开头的密码框）
// var passwordInput = d.querySelector('input[id^="ember"][type="password"]');

// 找到密码框后填充内容
if (passwordInput) {
    v(passwordInput, "PasswordForLogin");
}
void(0);

压缩后的书签（Bookmarklet）版本 #

直接复制这段代码到书签的URL栏即可使用：

javascript:/* FormFiller v0.2.0 - Fixed for dynamic password ID */var d=document;function i(a){return d.getElementById(a)}function n(a){return d.getElementsByName(a)[0]}function e(a){t='change';if(window.navigator.userAgent.match(/Trident|MSIEs/g)!=null){x=d.createEvent('Events');x.initEvent(t,1,0);}else{x=new Event(t);}a.dispatchEvent(x);}function v(a,v){a.value=v;e(a)}function c(a){a.checked=true;e(a)}v(i("identification"),"UsernameForLogin");var p=d.querySelector('input[type="password"]');p&&v(p,"PasswordForLogin");void(0);

说明 #

• 若页面只有一个密码框，用input[type="password"]足够精准，无需额外条件。
• 若页面有多个密码框，且目标密码框的ID确实以ember开头，替换为input[id^="ember"][type="password"]即可精准定位目标框。

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