[Autofill]Javascript注入表单信息的正确处理方式

熟悉JS的都知道,表单注入就是简单的一句话:inputElement.value="test",可是有时候这样设置并没有触发提交按钮状态的校验。只有手动改变输入框内容才能正常提交表单,这个问题困扰了我很久。不过终于解决了。
-_-嘿嘿 -_-

常用注入方式很简单,就下面一句话,缺点呢也很明显,就是无法触发change事件。

inputElement.value="test"

正确的注入方式,看着复杂,但是确保可以触发change事件。

function fill_form_input (element, value){
    var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
    var originalSet = descriptor.set;
    descriptor.set = function(val) {
        originalSet.apply(this,arguments);
    }
    Object.defineProperty(HTMLInputElement.prototype, "value", descriptor);
    originalSet.call(element, value);
    element.dispatchEvent(new Event('input', { bubbles: true }));
}
//使用例子
fill_form_input(inputElement, "test");

结论

山穷水复疑无路,柳岸花明又一村。 (陶渊明)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容