js 触发 change 事件
首先,请各位包涵,我本人对 JS 不是很熟,不知道“触发change事件”和“触发onchange事件”哪个更加合适。有园友知道的麻烦指出,先行谢过。
起因是这样的,工作上需要在浏览器页面上配置一些信息,同时需要配置的有好几百个。具体是需要在一个 HTML 的input
输入框里面输入自己需要的文本,然后保存。而这个input
框(猜测,因为页面不是我写的)是绑定了一个onchange
事件的,当其中的内容修改后,这个事件会触发,然后保存才会生效。而如果直接用 JS 来给这个input
框赋值的话,这个onchange
事件是不会触发的。
于是我上网找了好久,有说用trigger("change")
来触发的,但我试了并不行。更无奈的是,网上绝大部分文章都是在说,如果去绑定这个onchange
事件,而我要的是触发,而且问了好几个技术群里的朋友,几乎所有人都觉得我是在问如何绑定这个事件,最终写了个示例演示出来才能给他们说清楚。
今天不得已之下,到 Google 搜索了一下,在 StackOverflow 上找到了方法。原理是要先创建并初始化一个 change 事件,然后再用 dispatchEvent 去触发。代码如下:
var event = document.createEvent("HTMLEvents");
event.initEvent("change", true, true);
document.querySelector("#id").dispatchEvent(event);
参考:
https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
http://www.w3school.com.cn/jsref/event_initevent.asp
js 触发 change 事件的更多相关文章
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- Jquery触发Change事件
Jquery直接使用val的话不会触发Change事件需要做如下处理$("#"+p_id).val(p_time); $("#"+p_id).change();
- jquery 赋值时不触发change事件解决
$("#optionsId").change(function(){ $("#selectOptionsText").val('测试'); }); $(&quo ...
- 解决上传文件或图片时选择相同文件无法触发change事件的问题
昨天在做一个上传文件的模块时遇到了这样的问题:打开文件一上传,上传成功后再次点击文件一,change事件无反应 <input type="file" name="f ...
- iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。
实现一个依据iframe页面返回充值卡类型不同,安排不同的input部件. 点击选择弹出一个iframe.点击充值卡数据行.返回1.充值卡类型.2.充值卡id(用的UUID).3.充值卡号(字符串). ...
- select控件自动触发change事件
这里接上面的二级联动.背景:当页面跳转到修改页面时,需要首先绑定学院和专业.这就需要在页面加载时触发select的change事件,具体用trigger函数进行实现.代码如下. $("#xs ...
- Dynamics CRM Form表单中通过javascript抓取触发change事件字段的属性名
通过下面这段代码可以抓取到change的事件源,从而判断出是哪个属性字段触发的事件, function change(pContext) {var fieldName=pContext.getEven ...
- 改变input的值不会触发change事件的解决思路
通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...
- easyui-filebox上传文件或图片时选择相同文件无法触发change事件的问题
其实很简单,当选择完一个文件之后,会将文件名存放在input中的value值中,当下一次onChange之后,比对玩发现,value值没有发生变化,所以不能触发. 所以,只需要下次将value值清空就 ...
随机推荐
- typescript-dva脚手架
2019有太多的东西想尝试,ts,GraphQL,SSR,docker,python,electron,小程序云后台,vue3等等,一个个来吧,用两天了解了下typescript,大概做了个webpa ...
- bzoj1193 马步距离
Description 求点(xs,ys)走马步到(xp,yp)的最小步数 Input 只包含4个整数,它们彼此用空格隔开,分别为xp,yp,xs,ys.并且它们的都小于10000000. Out ...
- css display table使用小例子实验
display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...
- PAT 乙级 1037 在霍格沃茨找零钱(20)C++版
1037. 在霍格沃茨找零钱(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 如果你是哈利·波特迷,你会知 ...
- 2018-2019 20165226 网络对抗 Exp1 PC平台逆向破解
2018-2019 20165226 网络对抗 Exp1 PC平台逆向破解 目录 一.逆向及Bof基础实践说明 二.直接修改程序机器指令,改变程序执行流程 三.通过构造输入参数,造成BOF攻击,改变程 ...
- DevExpress 组件
最近看到 伍华聪 的博客里, DevExpress 组件那个效果很好看,特别是 LookUpEdit GridLookUpEdit 这两个控件,完美改善了 WinForm 里的 ComboBox 今天 ...
- php如何判断IP为有效IP地址
不需要正则表达式来判断,因为在php5.2.0之后,有专门的函数来做这个判断了. 判断是否是合法IP if(filter_var($ip, FILTER_VALIDATE_IP)) { // it's ...
- 微信jssdk批量添加卡券接口
1)首先是官方接口文档: 1.批量添加卡券接口:https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.0861973 ...
- PLSQL导出表结构
1:进行plsql后选怎Tools--------->Exports User Ojbects------------->选中需要导出的table,squence,view,type,fu ...
- 在控制终端输入AT命令
控制台终端输入AT命令到smd8,步骤如下: 1. 先执行命令 cat /dev/smd8 & 2. 再执行 echo -e "ati\r\n" > /dev ...