[GPT] 监测输入框被 js 设置了值 ?input 输入框被设置了 value 值,但是没有触发 change 事件?
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 事件?的更多相关文章
- 不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)
function update() { //document.form表单的name值.input输入框的name值 var username = document.form1.username; v ...
- js 触发 change 事件
首先,请各位包涵,我本人对 JS 不是很熟,不知道"触发change事件"和"触发onchange事件"哪个更加合适.有园友知道的麻烦指出,先行谢过. 起因是这 ...
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- js与jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听
思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...
- 改变input的值不会触发change事件的解决思路
通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...
- iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。
实现一个依据iframe页面返回充值卡类型不同,安排不同的input部件. 点击选择弹出一个iframe.点击充值卡数据行.返回1.充值卡类型.2.充值卡id(用的UUID).3.充值卡号(字符串). ...
- JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)
第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= " ...
- JS改变input的value值不触发onchange事件解决方案 (转)
方法(一)(转载的网络资料) 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...
- 使用js实现input输入框的增加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [Linux] 使用du命令查看文件夹空间使用情况
一.摘要 本文介绍了在linux下使用du命令查看文件夹所占空间大小的命令,包括查看当磁盘中所有文件占空间大小.前目录的所占空间大小.当前目录下一级子目录各自所占空间大小等等操作. 二.du命令示例 ...
- Android组件化开发实践和案例分享
目录介绍 1.为什么要组件化 1.1 为什么要组件化 1.2 现阶段遇到的问题 2.组件化的概念 2.1 什么是组件化 2.2 区分模块化与组件化 2.3 组件化优势好处 2.4 区分组件化和插件化 ...
- 浅析三维模型OBJ格式轻量化压缩集群处理方法
浅析三维模型OBJ格式轻量化压缩集群处理方法 三维模型的OBJ格式轻量化压缩是指通过一系列技术和方法将三维模型的文件大小进一步减小,以提高模型在计算机中的加载.传输和存储效率.集群处理技术是指利用多台 ...
- kali linux安装vmware tools过程详解
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/robacco/article/deta ...
- mybatis添加maven依赖
1 <dependencies> 2 <!--导入Mybatis依赖包--> 3 <dependency> 4 <groupId>org.mybatis ...
- 10 CSS边框属性
10 CSS边框属性 border-style(边框风格) 定义边框的风格,值可以有: /* none:没有边框,当border的值为none的时候,系统将会忽略[border-color] hidd ...
- 深入剖析 Java 类属性与类方法的应用
Java 类属性 Java 类属性,也称为字段,是类中的变量.它们用于存储与类相关的数据. 创建类属性 在类定义中声明属性: public class Main { int x; // 属性 Stri ...
- Qt:MD5加密
#include <QCryptographicHash> QString source_value = "123456"; // 待加密原始数据 QCryptogra ...
- std::thread 二:互斥量(lock_guard())
*:使用 lock_guard 后,就不可以使用 lock() 和 unlock() *:lock_guard 和智能指针一样,会自动解锁 #include <iostream> #i ...
- 《深入理解Java虚拟机》读书笔记:虚拟机性能监控与故障处理工具
一.JDK的命令行 虚拟机性能监控与故障处理工具 工具 1.jps:虚拟机进程状况工具 jps主要用来输出JVM中运行的进程状态信息,它的功能也和ps命令类似:可以列出正在运行的虚拟机进程,并显示虚拟 ...