1. input 输入框被设置了 value 值,但是没有触发 change 事件 ?

如果输入框的 value 值是通过 JavaScript 代码直接设置的,那么不会触发 change 事件,这是正常的行为。

change 事件只会在用户手动更改输入框的值并使其失去焦点时触发。

如果输入框的 value 值是通过用户交互(如键盘输入、复制粘贴等)或者浏览器自动填充(如记住密码功能)的方式设置的,那么应该会触发 change 事件。

如果没有触发 change 事件,可能是因为代码中存在 bug 或者事件绑定有问题。

2. 如何监测输入框被 js 设置了值

可以使用 MutationObserver 或者自定义事件来监听输入框的值是否被改动。

以下是使用 MutationObserver 的示例代码:

// 获取输入框元素
var input = document.querySelector('#my-input'); // 创建一个 MutationObserver 实例
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
console.log('输入框的值被修改了');
}
});
}); // 监听输入框属性变化
observer.observe(input, { attributes: true }); // 在其他 JS 代码中修改输入框的值
$('#my-input').val('新的值');

以上代码中,我们在其他 JS 代码中使用 jQuery 修改了输入框的值,然后通过 MutationObserver 监听到了输入框的值被修改的事件,并输出了相应的信息。

以下是使用自定义事件的示例代码:

// 获取输入框元素
var input = $('#my-input'); // 绑定自定义事件
input.on('value-set', function() {
console.log('输入框的值被设置了');
}); // 在其他 JS 代码中修改输入框的值并触发自定义事件
$('#my-input').val('新的值').trigger('value-set');

以上代码中,我们在其他 JS 代码中使用 jQuery 修改了输入框的值,并手动触发了自定义事件。在自定义事件的回调函数中,我们可以处理输入框的值被修改的事件。

Cool:ChatAI

Link:https://www.cnblogs.com/farwish/p/17473538.html

[GPT] 监测输入框被 js 设置了值 ?input 输入框被设置了 value 值,但是没有触发 change 事件?的更多相关文章

  1. 不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)

    function update() { //document.form表单的name值.input输入框的name值 var username = document.form1.username; v ...

  2. js 触发 change 事件

    首先,请各位包涵,我本人对 JS 不是很熟,不知道"触发change事件"和"触发onchange事件"哪个更加合适.有园友知道的麻烦指出,先行谢过. 起因是这 ...

  3. file类型input框设置上传相同文件,并都可以触发change事件。

    在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...

  4. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  5. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  6. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

  7. iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。

    实现一个依据iframe页面返回充值卡类型不同,安排不同的input部件. 点击选择弹出一个iframe.点击充值卡数据行.返回1.充值卡类型.2.充值卡id(用的UUID).3.充值卡号(字符串). ...

  8. JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)

    第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= " ...

  9. JS改变input的value值不触发onchange事件解决方案 (转)

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  10. 使用js实现input输入框的增加

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 浅谈React与SolidJS对于JSX的应用

    React将JSX这一概念深入人心.但,并非只有React利用了JSX,VUE.SolidJS等JS库或者框架都使用了JSX这一概念.网上已经有大量关于JSX的概念与形式的讲述文章,不在本文的讨论范围 ...

  2. Android端Charles抓包

    目录介绍 01.下载安装 02.抓包代理设置 03.抓包Https操作 04.抓包原理介绍 05.抓包数据介绍 06.常见问题总结 07.Android拦截抓包 01.下载安装 下载地址(下载对应的平 ...

  3. 程序员必须了解的 10个免费 Devops 工具

    哈喽大家好,我是咸鱼. 近年来,DevOps 已经成为一门将软件开发 (Dev) 与 IT 运维 (Ops) 相融合的重要学科,目的是为了缩短软件的开发生命周期并提供高质量软件的持续交付. 这篇文章整 ...

  4. ES6常用数组方法及模拟实现

    这里给大家分享下我搜索到的几个ES6常用数组方法及模拟实现,废话不多说,上代码 Array.from 可以将一个类数组转换成数组 在出现Array.from这个方法之前,我们转换类数组的方法: Arr ...

  5. Matlab绘图(1)通过属性检查器调整绘图

    Matlab图形属性检查器 和其他语言的绘图不一样的是,Matlab允许我们通过非编程的方式来自定义调整绘图.下面介绍Matlab图形的构成以及几种调整绘图时的常用操作. 图形构成 什么是Figure ...

  6. Linux开发相关命令整理

    1. 反转shell 2. ldd 3. objdump 4. ldconfig 5. telnet 6. nc 7. netstat 8. ss 9. tcpdump 10. lsof 11. st ...

  7. KingbaseES V8R3 备份恢复系列之 -- sys_rman备份过程分析

    ​ 案例说明: 本案例通过对KingbaseES sys_rman物理备份过程的详细描述,有助于在执行sys_rman过程中发生故障的分析. 适用版本: KingbaseES V8R3 一.sys_r ...

  8. Python爬取imdb电影数据并存储到mysql数据库

    数据获取方式:微信搜索关注[靠谱杨阅读人生]回复[电影].整理不易,资源付费,谢谢支持. Python爬虫代码: 1 import re 2 import time 3 import tracebac ...

  9. #笛卡尔树,dp#洛谷 7244 章节划分

    题目 分析 考虑段数受到答案限制,而答案为最大值的约数,那么枚举答案, 设\(dp[i]\)表示前\(i\)个位置分完最多可以分多少段只要\(dp[n]\geq k\)即合法. 那么\(dp[i]=\ ...

  10. #区间dp,离散#D 弱者对决

    分析 设\(dp[i][j][x]\)表示当前区间为\([i,j]\),最小值为\(x\)的最大总分, 状态转移方程可以用后缀最大值优化到\(O(n^3m)\),主要难点是输出方案 后缀最大值需要记录 ...