js修改表单值不会触发input事件
前情
最近在做需求开发时候，需要监听表单的input事件
坑位
当通过JS动态修改表单的值的发现并不会触发表单的input事件
Why?
个人猜测是浏览器默认行为，input只会针对用户手动输入做响应
解决方案
方式1
在JS动态修改表单域值的时候，可以手动触发一下表单input事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>input测试</title>
</head>
<body>
<input type="text" id="inputTest">
<div contenteditable id="contenteditTest">123456</div>
</body>
</html>
var inputTest = document.querySelector('#inputTest');
var contenteditTest = document.querySelector('#contenteditTest');
inputTest.addEventListener('input', function(e) {
console.log('inputTest input')
}, false);
contenteditTest.addEventListener('input', function(e) {
console.log('contenteditTest input')
}, false);
// 直接修改不会触发表单元素的input事件
inputTest.value ='123456';
contenteditTest.innerHTML = '654321';
// 通过Event对象手动触发input事件
var event = new Event('input');
function setInputTest(val) {
inputTest.value =val;
inputTest.dispatchEvent(event);
}
function setContenteditTest(val) {
contenteditTest.innerHTML = val;
contenteditTest.dispatchEvent(event);
}
console.log('----分隔线----');
setInputTest(111111);
setContenteditTest(222222);
对于以上代码会在控制台输出
----分隔线----
inputTest input
contenteditTest input
Event MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
在线测试：
https://jsbin.com/pijeqezijo/edit?html,js,console,output
方式2
通过Mutation Observer API用来监视 DOM变动。DOM的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API都可以得到通知，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="test" id="app">
<div class="item item-input" contentEditable></div>
</div>
</body>
</html>
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver||
window.WebKitMutationObserver ||
window.MozMutationObserver;
// 选择元素
var input = document.querySelector('.item-input');
// 配置观察选项:
var inputConfig = {
childList: true,
subtree: true,
characterData: true
}
// 创建观察者对象
var observerInput = new MutationObserver(function(mutations) {
console.log('--observer item input--');
});
// 传入目标节点和观察选项
observerInput.observe(input, inputConfig);
// 主动触发一次
input.innerHTML = '123654';
在线测试：https://jsbin.com/nakobuv/2/edit?html,js,console,output
注意事项
以上解决方法有一定的兼容性风险，第一种情况ie全废，第二种兼容IE11，如果对IE低版本有兼容要求，可以把input里的处理逻辑抽取成函数，在动态修改表单值的时候，手动调一下上面抽取的函数。
js修改表单值不会触发input事件的更多相关文章
- input输入中文时，拼音在输入框内会触发input事件的问题。
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...
- js jq输入框中按回车触发提交事件，用户在页面输入后按回车（Enter键）进行
js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...
- input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题
监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...
- vant 使用field组件加载页面就触发input事件的坑，已解决
使用vant的时候,遇到一个坑,加载组件就自动触发input事件,input事件里写了验证,导致已加载就验证错误 原因:v-model绑定的时候写的是null, filed组件接收的时候把他转换成空字 ...
- 解决拼音输入法会触发input事件的问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- jquery 给input text元素赋值,js修改表单的值
简单粗暴: (第一种) $('#checkUserName').attr("value",sessionUser.name); (第二种) $("#checkUserNa ...
- delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件
delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...
- JS 08表单操作_表单域
一.表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_n ...
- JavaScript获取html表单值验证后跳转网页中的关键点
关键代码: 1.表单部分 <form action="Depart.jsp" name="myform" method="post" ...
- 改变input的值不会触发change事件的解决思路
通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...
随机推荐
- 【学习笔记】数位DP
数位DP 适用条件 此类题目一般要求在\([l,r]\)区间内满足条件的数的个数,答案一般与数的大小无关,而与数各位的组成有关.题目中给出的数的范围一般较大,往往在\(10^9\)以上因此无法暴力枚举 ...
- 【学习笔记】状压DP
状态压缩DP 对于一个集合,他一有\(2^n\)个子集,而状态压缩就是枚举这些子集,每一个状态就是一个由\(01\)构成的集合,如果为\(0\)就表示不选当前的元素,否则就表示选.因为状态压缩将每一个 ...
- .NET 开源高性能 MQTT 类库
前言 随着物联网(IoT)技术的迅猛发展,MQTT(消息队列遥测传输)协议凭借其轻量级和高效性,已成为众多物联网应用的首选通信标准. MQTTnet 作为一个高性能的 .NET 开源库,为 .NET ...
- 【赵渝强老师】阿里云大数据ACP认证之阿里大数据产品体系
阿里大数据产品体系是基于阿里云飞天平台上的数据处理服务.主要分为阿里云大数据基础产品和阿里云数加平台,其产品架构图如下所示: 一.阿里云大数据基础产品 1.云数据库--RDS(ApsaraDB for ...
- IP地址集中管控:从分配规划、现网管理到合规性监测、准入控制全周期监管
当前,网络已成为企业必不可少的资源,企业网络系统也在不断扩展,IP地址数量不断增长,随之而来的是IP地址管理问题凸显.如何高效集中地管理网络中的IP地址,IP如何有效划分,成为影响企业网络可用性和质量 ...
- GPT-SoVITS语音合成模型实践
1.概述 GPT-SoVITS是一款开源的语音合成模型,结合了深度学习和声学技术,能够实现高质量的语音生成.其独特之处在于支持使用参考音频进行零样本语音合成,即使没有直接的训练数据,模型仍能生成相似风 ...
- 使用composer创建项目时报错：Composer could not find the config file？
使用composer创建项目时报错:Composer could not find the config file:C:\Composer ....? 一般报这个错就是composer安装的时候配置了 ...
- C#中的原始字符串
// 原始字符串使用 三个引号(至少三对)包裹,ps: 引号单独占用一行 // 原始字符串使用变量需要加两个 $$"""{变量}""" st ...
- 19 Transformer 解码器的两个为什么（为什么做掩码、为什么用编码器-解码器注意力）
博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...
- mysql基础-事务
本篇章为初步了解mysql数据事务控制问题,事务作为MySQL的基础篇章是至关重要的一部分内容! 事务 1.事务简介 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一 ...