前情

最近在做需求开发时候，需要监听表单的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事件的更多相关文章

  1. input输入中文时，拼音在输入框内会触发input事件的问题。

    问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...

  2. js jq输入框中按回车触发提交事件，用户在页面输入后按回车（Enter键）进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

  3. input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题

    监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...

  4. vant 使用field组件加载页面就触发input事件的坑，已解决

    使用vant的时候,遇到一个坑,加载组件就自动触发input事件,input事件里写了验证,导致已加载就验证错误 原因:v-model绑定的时候写的是null, filed组件接收的时候把他转换成空字 ...

  5. 解决拼音输入法会触发input事件的问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  6. jquery 给input text元素赋值,js修改表单的值

    简单粗暴: (第一种) $('#checkUserName').attr("value",sessionUser.name); (第二种) $("#checkUserNa ...

  7. delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件

    delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...

  8. JS 08表单操作_表单域

    一.表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_n ...

  9. JavaScript获取html表单值验证后跳转网页中的关键点

    关键代码: 1.表单部分 <form action="Depart.jsp" name="myform" method="post" ...

  10. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

随机推荐

  1. 均值回归策略在A股ETF市场获利的可能性

    如何在股票市场获利 曾经有人告诉我一个在股票市场赚钱的秘诀,只要掌握这个秘诀,赚钱就像捡钱一样容易.他说:这个秘诀其实很简单,就是在股票价格低的时候买入,在价格高的时候卖出. 啧啧,不愧是秘诀,明明是 ...

  2. 【赵渝强老师】在Spark SQL中读取JSON文件

    Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用.为什么要学习Spark SQL?如果大家了解Hive的话,应该 ...

  3. 在C#中使用适配器Adapter模式和扩展方法解决面向的对象设计问题

    之前有阵子在业余时间拓展自己的一个游戏框架,结果在实现的过程中发现一个设计问题.这个游戏框架基于MonoGame实现,在MonoGame中,所有的材质渲染(Texture Rendering)都是通过 ...

  4. ARM SMMU的原理与IOMMU

    首先放一个社区iommupatch的网址:https://lore.kernel.org/linux-iommu/ 1: arm smmu的原理 1.1: smmu 基本知识 如上图所示,smmu 的 ...

  5. linux中透明巨页与巨页的区别

    在Linux中,透明巨页(Transparent HugePage)和巨页(HugePage)是两种不同的内存管理技术. 透明巨页是Linux内核中的一项特性,旨在提高内存的利用率和性能.它通过将内存 ...

  6. nestjs 和 .net DI 使用并注册的区别

    核心:对象之间的关系 各种 引用  --- 方便使用各种服务 1. .net 注册服务 三种注册方式 build.Service.Addsigtel 单例 瞬时 等 .addSingtel<IU ...

  7. AWR分享案例

    [深度长文]循序渐进解读Oracle AWR性能分析报告 - ORACLE - dbaplus社群:围绕Data.Blockchain.AiOps的企业级专业社群.技术大咖.原创干货,每天精品原创文章 ...

  8. hbase的架构

    HBase中的存储包括HMaster.HRegionSever.HRegion.HLog.Store.MemStore.StoreFile.HFile等角色构成,具体如下HMaster的作用 1.为H ...

  9. kubernetes组件大全

    master节点组件 控制平面的组件我们会找一台单独的机器来部署,我们习惯上把部署控制平面组件的机器称为master节点,以下都会用master节点来代替控制平面这个概念,master节点的组件能够对 ...

  10. Docker容器制作DockerFile

    Docker换国内源和简单操作 vim /etc/docker/daemon.json { "registry-mirrors": ["http://hub-mirror ...