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. 安装npm install报错npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npmjs.org/webpack-subresource-integrity failed, reason

    执行命令:npm run dev 启动前端项目报如下错误,vue-cli-service是Vue一个启动的插件,需要安装 D:\nodejs\npm.cmd run dev > yuntan1h ...

  2. 7.3万字肝爆Java8新特性,我不信你能看完!(建议收藏)

    大家好,我是冰河~~ 说实话,肝这篇文章花了我一个月的时间,关于Java8的新特性全在这儿了,建议先收藏后阅读. Java8有哪些新特性? 简单来说,Java8新特性如下所示: Lambda表达式 函 ...

  3. OREPA:阿里提出训练也很快的重参数策略,内存减半,速度加倍 | CVPR 2022

    论文提出了在线重参数方法OREPA,在训练阶段就能将复杂的结构重参数为单卷积层,从而降低大量训练的耗时.为了实现这一目标,论文用线性缩放层代替了训练时的BN层,保持了优化方向的多样性和特征表达能力.从 ...

  4. 学生成绩管理--C语言

    # 学生成绩管理系统 效果 1.菜单选项 void welcome()//菜单 { printf("欢迎使用学生管理系统\n"); printf(" 1.增加学生信息\n ...

  5. Make It Equal 题解

    Problem Link 简要题意 翻译很清楚. 思路 提供一种简单直接的思路. 可以发现最多会操作 \(n\) 次. 那么就可以每次直接枚举切的高度 \(h\),检查更改是否超过 \(k\),之后暴 ...

  6. 新前言with留言板

    旧博客也是会用的,但是现在只用博客园写博客,平时csdn的东西也会凑凑热闹 欢迎各位julao来留言板留言 /* ID:lemondi1 LANG:C++ TASK:test */ #include ...

  7. #ST表#CF1879F Last Man Standing

    洛谷题面 CF1879F 分析 当 \(x\) 大于最大值时一定可以被约化为等于的情况,考虑枚举 \(x\), 通过枚举倍数的方式可以知道存在若干段区间消耗同一精神状态的次数是相同的,那么区别就是其精 ...

  8. #循环节,gcd#JZOJ 5362 密码

    题目 询问一个排列\(A\)是否能够通过\(A_i=A_{A_i}\)得到, 同时还要满足给定的两个数通过加减或者交换能够得到已知的两个数 分析 下面的就是要保证\(\gcd\)相同,但是还有上面的操 ...

  9. java中DelayQueue的使用

    目录 简介 DelayQueue DelayQueue的应用 总结 java中DelayQueue的使用 简介 今天给大家介绍一下DelayQueue,DelayQueue是BlockingQueue ...

  10. OpenHarmony——内核对象队列之算法详解(下)

    前言 OpenAtom OpenHarmony(以下简称"OpenHarmony") LiteOS-M 内核是面向 IoT 领域构建的轻量级物联网操作系统内核,具有小体积.低功耗. ...