做一个能自动填充网站评论框昵称与邮箱的小书签

我是在网上找到了这个代码:

javascript:(function(){document.getElementById('author').value='昵称';
document.getElementById('email').value='[email protected]';
document.getElementById('url').value='https://example.org';})()

但是有的网站可能并不是<input id=author>这种,可能是<input id="waline-author" class="author">这种,甚至是<input type="text" name="author" id="comment-name" class="text" >这种,那么请问如何同时适配这几种类型呢?

感觉密码管理器可以啊。

还有现在需要直接填写就能评论的地方很少吧,都需要手机注册…

尝试了,不太行

小众不就可以直接评论 :rofl:很多博客都是呀

input 这个东西有没有标准啊,我去改改代码…

我觉得这事 @dms 可以

1 个赞

并没有特别明确的标准,或者说并没有认真遵守一个统一的规范。所以在前端的各种问题上原本是很简单的小事情,但是实际情况就可能非常的复杂。


这个问题的解决方案可以进一步的去进行完善,使它可以适用于更多的情况,但并不能够保证绝对 OK。

这就要涉及到更复杂一些的元素选择器了,首先我们使用下面两种方法去选择元素:

// 这里所说的选择器就是我们在 CSS 中所使用的那种书写方式,是完全兼容的
// 下面这种选择方式会获取页面中第 1 个匹配选择器的元素
document.body.querySelector('这里书写标准的选择器')
// 下面这种选择方式会获取页面中所有匹配选择器的元素
// 这种方式一般后面会接一个 forEach 进行遍历,进一步处理其中的每一个元素
document.body.querySelectorAll('这里书写标准的选择器')

简化情况,我们只找页面中符合情况的第 1 个元素,也就是使用上面第 1 种方法

以邮箱为例,楼主已经举出了第 1 个例子:#email, 就是元素的 ID 是 Email,但是如果严谨一些的话,我们可以举出更多的例子:#e_mail#e-mail#mail……

当然在网页中这个元素可能并没有那么规范的命名,这样穷举下去,也只是希望双方的思维能够恰好碰撞在一起。那有没有更典型一点的特征呢?有的,这个输入框既然是用来输入电子邮箱的,那么它的输入类型就应该是 email(type="email"),这时候就可以使用属性选择器来进行选择:input[type="email"]

这是一个多么美好,多么直接,多么简洁的方法啊!非常可惜的是许多网页并没有这么规范,而不规范的网页也可以照常运行……(有点想说 C 语言

所以上面的穷举法还是不能丢,而且不光是元素的 ID,还有元素的类(class),元素的 name……都应该纳入考虑。但这么穷举下去也不是个办法,归纳一下就是在上述属性中具有 mail 这个单词的元素。

属性选择器有许多的匹配方式,我在这里不一一列举,只说一下符合这个应用需求的:input[id*="mail"],表示在 ID 属性中包含 mail 这个单词的输入框。

好了,现在综合一下上面所说的这些内容,让我们来书写具体的选择器,为了方便阅读,所以除了逗号分隔我还加入了换行:

input[type="email"],
input[id*="mail"],
input[class*="mail"],
input[name*="mail"] {
  font-size: 18px;
}

后面大括号是随手给他们添加了一点样式,如果你有书写过 CSS,就应该很容易理解了。

现在使用我们最开始所说的方式代入这些选择器:

document.body.querySelector(
   `input[type="email"],
    input[id*="mail"],
    input[class*="mail"],
    input[name*="mail"]`
)

为了方便阅读,我依然加入了换行,注意这里我使用的是反引号,用反引号就可以在里面进行换行,而不影响程序的识别。当然你也可以不加换行,然后使用普通的单双引号。

其他的问题就举一反三吧,如果把每一个细节都展开,就……就不如来找我学前端呀,2333

(这种方法依然存在明显的缺陷,这4个选择器的权重可能是不一样的,页面中可能有多个符合这些选择器的元素,其实应该通过各种判断,再进一步分配他们的优先级,以及元素的遍历等。但是这样只是提升了一点点的可靠性,而为此要书写几倍甚至几十倍的代码。所以有时候想要稳定的去解决一个前端上的小问题,要进行的思考和付出的努力,很可能是其他人所难以想象的。)

所以小老鼠这么努力,可以有一杯咖啡吗?

AliPay-240 WePay-240 QQPay-240

1 个赞

感谢,对于场景是博客来说足够了(虽然有些看不懂