首页 > 其他分享 >[GPT] 监测输入框被 js 设置了值 ?input 输入框被设置了 value 值,但是没有触发 change 事件?

[GPT] 监测输入框被 js 设置了值 ?input 输入框被设置了 value 值,但是没有触发 change 事件?

时间:2023-06-11 20:46:19浏览次数:62  
标签:自定义 value 输入框 事件 设置 input 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 修改了输入框的值,并手动触发了自定义事件。在自定义事件的回调函数中,我们可以处理输入框的值被修改的事件。

 

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

标签:自定义,value,输入框,事件,设置,input,change
From: https://www.cnblogs.com/farwish/p/17473538.html

相关文章

  • [GPT] jquery chosen插件选择的多个元素是逗号分隔的,怎么设置成其它分隔符号 ?
     如果你想要在jQueryChosen插件中使用其它分隔符号,可以通过以下方式实现: 1.设置delimiter选项为一个包含所需分隔符的字符串。$(".chosen-select").chosen({delimiter:";"});在这个例子中,我们将分隔符设置为分号;。 2.在表单提交时,使用JavaScript替换......
  • Centos 7 学习之静态IP设置
    本学习主要针对Centos7.0.1406版本进行学习整理! 1、编辑ifcfg-eth0文件,vim最小化安装时没有被安装,需要自行安装不描述。1.#vim/etc/sysconfig/network-scripts/ifcfg-eth02、修改如下内容1.BOOTPROTO="static"#dhcp改为static2.ONBOOT="yes"#开机启用......
  • input输入框失去焦点时获取光标位置并插入内容
     <el-input@blur="blur":rows="5"v-model="messageForm.content"type="textarea"maxlength="100"show-word-limitplaceholder="请输入你的留言"></el-input> data(){return{......
  • Win10任务栏右下角日期时间秒数 星期几显示设置
    步骤1:点击跳转步骤2:点击跳转Tips:记得关闭小任务栏模式否则日期和周几都不会显示......
  • java——微服务——spring cloud——Nacos——Nacos服务实例的权重设置
          ......
  • 更新完代理软件设置后无法访问网络
    1确定自己的本地的socks5等代理监听端口是否被更新修改 2如果没有修改确定自己的本地实际代理端口跟设置的代理端口是否一致  3如果还不行,重启下电脑,确定不用代理能访问的情况下,再打开代理,确认端口一致......
  • Cassandra 的数据存储结构——本质是SortedMap<RowKey, SortedMap<ColumnKey, ColumnV
    Cassandra的数据存储结构Cassandra的数据模型是基于列族(ColumnFamily)的四维或五维模型。它借鉴了Amazon的Dynamo和Google'sBigTable的数据结构和功能特点,采用Memtable和SSTable的方式进行存储。在Cassandra写入数据之前,需要先记录日志(CommitLog),然后数据开始写......
  • ubuntu22.04设置静态ip
    设置虚拟机网络修改配置文件查看配置文件ls/etc/netplansudovi01-network-manager-all.yaml//添加如下配置network:ethernets:ens33:dhcp4:false//关闭dhcpaddresses:[192.168.5.21/24]//设置静态ipoptional:trueroutes:......
  • spdlog使用头文件或dll的宏设置
    宏作用SPDLOG_HEADER_ONLYspdlog只使用头文件FMT_HEADER_ONLYfmtlib只用用头文件SPDLOG_COMPILED_LIBspdlog使用dllSPDLOG_SHARED_LIBspdlog使用dll,实际可以不设置,单独设置SPDLOG_COMPILED_LIB就可以SPDLOG_ACTIVE_LEVEL=SPDLOG_LEVEL_TRACESPDLOG_TRAC......
  • .htaccess防盗链设置
    RewriteEngineonRewriteCond%{HTTP_REFERER}!^$[NC]RewriteCond%{HTTP_REFERER}!60ie.net[NC]RewriteCond%{HTTP_REFERER}!youdao.com[NC]RewriteCond%{HTTP_REFERER}!zhuaxia.com[NC]RewriteCond%{HTTP_REFERER}!twitter.com[NC]RewriteCond%{H......