[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/ ...
随机推荐
- [leetcode 496. 下一个更大元素 I] 单调栈
单调栈的写法: import java.util.ArrayDeque; import java.util.Deque; import java.util.HashMap; import java.u ...
- 快速上手系列:CSS
一 选择符 1 通配:*{} 所有元素 类:p{} 如 p 标签等相应元素 ID:#id{} 使用相应 id 属性的元素样式 类:.类名{} 使用相应 class 属性的元素样式 包含:div p{} ...
- verilog之状态机
verilog之状态机设计 1.状态机的原理 状态机,就是基于状态变化而设计的硬件模块,是一种常见的设计思路.掌握状态机的使用,是初步建立复杂逻辑设计能力的开始.所谓的状态机,和高级语言程序的流程图十 ...
- 深度剖析 Spring 框架在 Java 应用开发中的优势与应用
Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...
- 6. Eigenvalues and Eigenvectors
Keys: What are Eigenvalues and Eigenvectors? How to find Eigenvalues and Eigenvectors? Applications ...
- npm发包教程
1-npm注册账号 访问npm官网注册账号,邮件验证激活账号 npm官网 2-项目npm配置 在项目下打开终端,初始化npm npm init -y 此时项目下会生成package.json 配置文件 ...
- HarmonyOS跨进程通信—IPC与RPC通信开发指导
一.IPC与RPC通信概述 基本概念 IPC(Inter-Process Communication)与RPC(Remote Procedure Call)用于实现跨进程通信,不同的是前者使用Bi ...
- 【未测试】CentOS 6.5快速部署HTTP WEB服务器和FTP服务器
CentOS 6.5快速部署HTTP WEB服务器和FTP服务器 [题记]本文使用CentOS 6.5minimal快速搭建HTTP服务器和仅供授权用户登陆的FTP服务器.意在使用授权FTP用户通过登 ...
- 重学c#系列——linq(4) [三十]
前言 简单介绍一下linq 查询表达式. 正文 上文其实已经介绍了查询表达式了. 但是呢,这里就介绍一些复杂一点的. 这里不会去介绍查询表达式,而是直接介绍一些复杂的. let 字句. static ...
- ActiveMQ c# 系列——实例(二)
前言 前面一章中介绍了activemq,并且呢安装了. 这一章就来看一下实例吧. 正文 我使用队列举例. 是这样子,队列是一对一的关系,比如说我生产了一条消息,那么只要有一个消费者消费完毕那么就算消费 ...