时间戳

首页 > 解决方案 > 我应该寻找什么 Javascript / jQuery 事件来检测由 Javascript / jQuery 以编程方式填充的表单字段？

javascript - 我应该寻找什么 Javascript / jQuery 事件来检测由 Javascript / jQuery 以编程方式填充的表单字段？

问题描述

如果这是我表单上的电子邮件输入字段：

<input autofocus="" class="emailinput form-control" id="id_email"
       maxlength="254" name="email" required="" type="email">

我正在尝试检测该值是否完全更改-特别是如果用户使用 Javascript / jQuery / 来更改它。

我关注这些事件：

$("#id_email").on('input blur change paste keyup keydown keypress DOMAttrModified propertychange', function(e) {
    console.log('Email field value changed!');
})

然后这样做...

$('#id_email').val('" onMouseOver="alert(1);')

果然，文本" onMouseOver="alert(1);被插入而不被检测到。

我应该寻找什么事件来检测表单字段是否由于以编程方式插入（例如通过 Javascript / jQuery）而发生变化？

编辑

我的用例是什么？

我试图提供一个愚蠢简单的第一道防线来抵御跨站点脚本（反射）攻击，防止机器人/工具以 编程方式将已知漏洞提交到表单中。

机器人/工具将尝试在未被检测到的情况下执行此操作。这就是为什么我想知道是否有一种方法可以检测字段是否因 javascript 而发生变化。

标签： javascriptjquery

解决方案

input事件应该适用于每个直接输入更改，但运行 jquery.val更改不会触发input更改事件。

您可以使用 手动触发输入上的值更改事件.trigger('input')。

$("#id_email").on('input', function(e) {
    console.clear();
    console.log('Email field value changed! - ' + e.target.value);
})

$("#id_email").val('test@test.com').trigger('input');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input autofocus="" class="emailinput form-control" id="id_email" maxlength="254" name="email" required="" type="email">

推荐阅读