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. [leetcode 496. 下一个更大元素 I] 单调栈

    单调栈的写法: import java.util.ArrayDeque; import java.util.Deque; import java.util.HashMap; import java.u ...

  2. 快速上手系列:CSS

    一 选择符 1 通配:*{} 所有元素 类:p{} 如 p 标签等相应元素 ID:#id{} 使用相应 id 属性的元素样式 类:.类名{} 使用相应 class 属性的元素样式 包含:div p{} ...

  3. verilog之状态机

    verilog之状态机设计 1.状态机的原理 状态机,就是基于状态变化而设计的硬件模块,是一种常见的设计思路.掌握状态机的使用,是初步建立复杂逻辑设计能力的开始.所谓的状态机,和高级语言程序的流程图十 ...

  4. 深度剖析 Spring 框架在 Java 应用开发中的优势与应用

    Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...

  5. 6. Eigenvalues and Eigenvectors

    Keys: What are Eigenvalues and Eigenvectors? How to find Eigenvalues and Eigenvectors? Applications ...

  6. npm发包教程

    1-npm注册账号 访问npm官网注册账号,邮件验证激活账号 npm官网 2-项目npm配置 在项目下打开终端,初始化npm npm init -y 此时项目下会生成package.json 配置文件 ...

  7. HarmonyOS跨进程通信—IPC与RPC通信开发指导

      一.IPC与RPC通信概述 基本概念 IPC(Inter-Process Communication)与RPC(Remote Procedure Call)用于实现跨进程通信,不同的是前者使用Bi ...

  8. 【未测试】CentOS 6.5快速部署HTTP WEB服务器和FTP服务器

    CentOS 6.5快速部署HTTP WEB服务器和FTP服务器 [题记]本文使用CentOS 6.5minimal快速搭建HTTP服务器和仅供授权用户登陆的FTP服务器.意在使用授权FTP用户通过登 ...

  9. 重学c#系列——linq(4) [三十]

    前言 简单介绍一下linq 查询表达式. 正文 上文其实已经介绍了查询表达式了. 但是呢,这里就介绍一些复杂一点的. 这里不会去介绍查询表达式,而是直接介绍一些复杂的. let 字句. static ...

  10. ActiveMQ c# 系列——实例(二)

    前言 前面一章中介绍了activemq,并且呢安装了. 这一章就来看一下实例吧. 正文 我使用队列举例. 是这样子,队列是一对一的关系,比如说我生产了一条消息,那么只要有一个消费者消费完毕那么就算消费 ...