前情

最近在做需求开发时候，需要监听表单的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. 暑假集训CSP提高模拟2

    A.活动投票 主元素问题,用摩尔投票 #include<bits/stdc++.h> using namespace std; int n,a=-1,acnt,x; int main(){ ...

  2. [namespace hdk] string

    #include<bits/stdc++.h> using namespace std; namespace hdk{ const int siz=100001; class string ...

  3. 第6天：基础入门-抓包技术&HTTPS协议&APP&小程序&PC应用&WEB&转发联动

    安装charles 到Windows本地: 安卓模拟器安装: 如果抓模拟器就要使用从远程主机,如果不是,则从所有进程 访问 谷歌浏览器安装证书: PC微信小程序代理抓取: 41:43 :如何将char ...

  4. MongoDB安装及配置Navicat MongoDB Tools

    一.下载MongoDB 1.下载网址:https://www.mongodb.com/try/download/community 注:本文档以Windows和msi安装为例 二.安装MongoDB ...

  5. Android复习(四)权限—>应用权限最佳做法

    应用权限最佳做法 权限请求可以保护设备上的敏感信息,仅在需要访问信息以使应用正常工作时才应使用.利用本文档提供的技巧,您可能无需请求访问此类信息即可实现相同(或更好)的功能:但本文不会详细讨论权限在 ...

  6. QToss：基于.NET架构的跨境电商的工具，助力企业实现智能数据营销

    2024年10月13日下午参加了一场在深圳举办的跨境电商大佬们的聚会,现场参加的人数上千人. 大会分享嘉宾中有位来自美国的,他告诉我们不用担心美国政府会把TikTok禁掉,TikTok在全世界都很受欢 ...

  7. Spark任务OOM问题如何解决？

    大家好,我是 V 哥.在实际的业务场景中,Spark任务出现OOM(Out of Memory) 问题通常是由于任务处理的数据量过大.资源分配不合理或者代码存在性能瓶颈等原因造成的.针对不同的业务场景 ...

  8. 关于git的安装

    window平台下面: 步骤一: 首先去官网下载安装包: 官方链接:https://git-scm.com/download/win 至于选择32位还是64为的,各位就见仁见智了(根据自己的系统). ...

  9. 云原生周刊：CNCF 宣布 KubeEdge 毕业

    云原生周刊:CNCF 宣布 KubeEdge 毕业 开源项目推荐 Watchtower Watchtower 这个项目能够自动监测并更新正在运行的 Docker 容器.它会定期检查并拉取 Docker ...

  10. dc-2靶机-超详解

    dc-2内网靶 1.信息收集 入站信息 nmap扫描 nmap -A -p- -v 192.168.27.0/24 得到消息: IP:192.168.227.139 cms:wordpress 4.7 ...