关于input宽用js改变value不触发事件的解决方案

最新推荐文章于 2022-07-28 11:33:59 发布
最新推荐文章于 2022-07-28 11:33:59 发布
阅读量645 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29109193/article/details/87304739
版权

我直接贴代码，不多，也很容易看的懂

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="demo" />
    <!-- Simulate click -->
    <input type="button" οnclick="changeValue();" value="点击我改变input值" />
    <!-- Add a click handler that calls preventDefault -->
    <input type="button" οnclick="addHandler();" value="js触发input和change默认事件" />111
    <!-- Remove the click handler that calls preventDefault -->
    <input type="button" οnclick="removeHandler();" value="js取消触发input和change默认事件" />
    <script>
        var input = document.getElementById('demo');
        input.addEventListener('input', function() {
            console.log('oninput event ');
        }, true);


        input.addEventListener('change', function() {
            console.log('onchange event');
        }, false);

        // 参考网站
        // https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
        // https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

        function changeValue() { //改变input的值函数
            input.value = Math.random() * 10;
            simulateEvent("demo", "change");
            simulateEvent("demo", "input");
        }

        function simulateEvent(id, event) { //js触发事件--事件构造器
            var evt = document.createEvent("Event");
            evt.initEvent(event, true, true);
            var cb = document.getElementById(id);
            var canceled = !cb.dispatchEvent(evt);
            if (canceled) {
                // A handler called preventDefault
                // console.log("canceled");
            } else {
                // None of the handlers called preventDefault
                // console.log("not canceled");
            }
        }

        function preventDef(event) {
            event.preventDefault();
        }

        function addHandler() {
            document.getElementById("demo").addEventListener("change", preventDef, false);
            document.getElementById("demo").addEventListener("input", preventDef, false);
        }

        function removeHandler() {
            document.getElementById("demo").removeEventListener("change", preventDef, false);
            document.getElementById("demo").removeEventListener("input", preventDef, false);
        }
    </script>
</body>

</html>

夏日好凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
中文输入法不触发onkeyup事件的解决办法
09-04
`oninput`事件在大多数现代浏览器（包括Firefox）中支持，当`<input>`元素的`value`属性因用户输入或JavaScript操作发生变化时触发。而`onpropertychange`事件是Internet Explorer特有的，它会在元素的任何属性变化...
使用input type=text value=str取值不完全解决方案
09-28
为了解决这个问题，有以下两种解决方案： 1. **去除空格或替换分隔符**： - 去掉格式化字符串中的空格，例如将“yyyy年MM月dd日 E ”改为“yyyy年MM月dd日E”，这样 HTML 不会将其视为需要转义的字符，因此可以...
JS改变input的value值不触发onchange事件解决方案
左安青的博客
11-06 4288
需要了解的知识 首先，我们需要了解onchange和onpropertychange的不同： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 onpropertychange 是IE浏览器的专属方法 了解这一点后我们发现onpropertychan...
通过js脚本改变input元素的value值时无法触发change事件的解决方案
qb0097的博客
07-28 5253
最近用油猴写自动脚本时发现，在登录时直接把信息赋给对应input元素的value变量后，无法触发change事件导致登录失败。在网上查询了好几篇说这事的文章全都是在胡说八道，最后还是自己摸索出解决方案，在这分享给大家，以正视听。.........
JS改变input的value值不触发onchange事件解决方案 （转）
fenyu8的专栏
01-12 2868
方法（一）（转载的网络资料） 需要了解的知识     首先，我们需要了解onchange和onpropertychange的不同：     IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 onpropertychange 是IE浏览器的专属方法    ...
JS改变input的value值不触发onchange事件解决方案【已解决】
dearbaba_11的博客
05-04 630
JS改变input的value值不触发onchange事件解决方案【已解决】
JavaScript动态的改变input的value属性时，不触发onchange事件解决方案
qq464598631的博客
04-28 855
直接贴代码，以滑动条为例，原理懂的都懂： var slider = document.createElement('input'); var onchange = function(){ var percent = ((slider.value - slider.min) / (slider.max - slider.min)) * 100; slider.style.backgrou...
JS改变input的value值不触发onchange事件解决方案（超简版）
q89757316的博客
07-10 7323
原文：https://blog.csdn.net/yuwq123/article/details/70655199 监听js改变input的值触发的onchange事件 $("#inpstart").attr("value",$("#inpend")[0].value); 当 我们像上面这样给一个input赋值时，由于onchange时间对input框不起作用，大家首先会想到使用 on...
js更改input文本框的value值，无法触发input的onChange，onInput事件，解决方案
韩旭的博客
10-29 8030
在文章的开头，我们需要了解一下 change: 当元素的值发生改变、文本框失去焦点（无法实时更新）会触发 change 事件。 input: 当文本框的值发生改变、存在焦点时（实时更新），会触发 input事件。 那么什么样的环境会触发我们的标题行为呢？ <input id='inp'/> <script> var inp = document.getElementById('inp') // 首先要了解的是 此时变更value值是无法触发change和input事件的 i
js动态改变input的值不触发input的change事件的解决办法
热门推荐
weixin_34414650的博客
02-09 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
js赋值文本框不触发监听事件解决方案
qq_35392981的博客
09-28 750
// 定义观察器Observer， var observer = new MutationObserver(function() { alert('监听成功') }); // 定义需要监控dom的哪些内容 observer.observe(document.getElementById('orgCode'), { attributes : true, attributeOldValue : false, attri...
模拟用户操作Input元素，不会触发相应事件
10-30
然而，在实际应用过程中，开发者可能会遇到一个问题——即通过JavaScript模拟用户对`<input>`元素的操作时，并不能触发这些元素所绑定的事件监听器。这一现象背后的原因及其解决方案，是我们接下来将要探讨的重点。 ...
Vue $emit()不能触发父组件方法的原因及解决
10-15
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...
笔记222222222222222222222222222222
最新发布
08-04
笔记222222222222222222222222222222
仿拉钩App小程序.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
华云智慧园区.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
新浪读书.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
基于Springboot和Vue的 网上购物商城系统源码 网上购物商城系统代码（高分优秀毕业设计）
08-04
网上购物商城系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值