前情

最近在做需求开发时候，需要监听表单的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. Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数

    title: Nuxt Kit 自动导入功能:高效管理你的模块和组合式函数 date: 2024/9/14 updated: 2024/9/14 author: cmdragon excerpt: 通 ...

  2. manim边学边做--空心多边形

    空心的多边形Cutout是一种比较特殊的多边形,主要用于解决与形状.大小.位置等相关的数学问题. Cutout多边形可以定义物体表面的空洞或凹陷部分,从而更准确地模拟现实世界中的复杂形状. 比如,在P ...

  3. Nuxt.js 应用中的 page：transition：finish 钩子详解

    title: Nuxt.js 应用中的 page:transition:finish 钩子详解 date: 2024/10/10 updated: 2024/10/10 author: cmdrago ...

  4. 权限控制 vue3

  5. 46.使用过vuex和vue-router吗

    使用过,vuex是状态管理工具,它的数据可以被所有的组件获取,方法可以被所有的组件调用 : vuex  的内部的运行机制:state提供了数据驱动视图,dispath派发actions 执行异步操作, ...

  6. 云原生周刊 | 使用 K8s 可视化工具集来调试业务 | 2023-1-30

    开源项目推荐 k8z k8z 意在 K8s 业务层面,提供一个方便好用的 K8s 集群可视化工具集.目前包含以下功能: 终端:连接到集群任意 Pod 容器上,方便调试 Tcpdump:对集群内容器进行 ...

  7. RocketMQ 5.0 如何配置TLS加密传输？

    本文作者:李伟,社区里大家叫小伟,Apache RocketMQ Committer,RocketMQ Python客户端项目Owner ,Apache Doris Contributor,腾讯云Ro ...

  8. Paths和Files

    Paths 类 Paths 类主要用于操作文件和目录路径.它提供了一些静态方法,用于创建java.nio.file.Path实例,代表文件系统中的路径. // 创建一个Path实例,表示当前目录下的一 ...

  9. AWS学习笔记-网络

    [用语]网络组件解释:https://zhuanlan.zhihu.com/p/137963921 VPC之间建立连接. VPC对等连接(VPC Peering) 私有子网中的实例访问Internet ...

  10. Visual Studio 2022只能使用WSL调试问题处理

    删除项目的Properties目录下面的launchSettings.json文件