前情

最近在做需求开发时候，需要监听表单的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. ASP.NET Core – Middleware

    前言 MIddleware 就是中间件, ASP.NET Core 是用来处理 http request 的. 当 request 抵到 server 就进入了 Middleware pipe. 每个 ...

  2. 解密Prompt系列38.多Agent路由策略

    常见的多智能体框架有几类,有智能体相互沟通配合一起完成任务的例如ChatDev,CAMEL等协作模式, 还有就是一个智能体负责一类任务,通过选择最合适的智能体来完成任务的路由模式,当然还有一些多智能体 ...

  3. MyBatisPlus——标准数据层开发

    标准数据层开发 标准数据层CRUD功能 lombok 一个java类库,提供了一组注解,简化POJO实体类开发    常用注解@Data    为当前实体类在编译期设置对应的get/set方法,无参/ ...

  4. 系统编程-文件IO-dup和dup2系统调用

    在linux下,一切皆文件. 文件描述符用于操作文件. 从shell中运行一个进程,默认会有3个文件描述符存在(0.1.2):)0表示标准输入,1表示标准输出,2表示标准错误. 一个进程当前有哪些打开 ...

  5. HDK Include Header File （1.7）

    Download 1.7 | 1.7.1 | 1.7.2 1.7.1 使用方法:编译选项->目录->C++包含文件->添加 [解压目录]\include 1.7.2 使用方法:编译选 ...

  6. 八字五行强弱喜用神测算api免费接口_json数据格式_可计算五行打分强弱

    八字以木.火.土.金.水去分析其旺弱,而分析之法以月令地支最为有力,其次为时支,再次为日支,最弱为年支,而天干必须见地支有同类或有生自己的五行才有用,因为只有天干一个单独的五行,其力会弱至无用.这个接 ...

  7. USB2.0 USB3.0 供电情况及规定

    USB(通用串行总线)的不同版本在供电能力和规定上有所不同.以下是关于USB 2.0.USB 3.0和USB 3.1供电情况的详细信息: USB 2.0 最大供电电流: 500毫安 (mA) 最大供电 ...

  8. 8. REM解释一下

    rem (root em )是 c3 新增的相对单位 ,相对的是html根元素,动态变化自己的大小 : 补充: em 也是相对单位,相对的是父元素来动态设置自己大小 : px 是绝对单位,是相对于屏幕 ...

  9. 强化学习笔记之【SAC算法】

    强化学习笔记之[SAC算法] 前言: 本文为强化学习笔记第四篇,第一篇讲的是Q-learning和DQN,第二篇DDPG,第三篇TD3 TD3比DDPG少了一个target_actor网络,其它地方有 ...

  10. Android复习(四)权限—>定义自定义应用权限

    定义自定义应用权限 本文档介绍了应用开发者如何使用 Android 提供的安全功能来定义自己的权限.通过定义自定义权限,应用可以与其他应用共享其资源和功能.如需详细了解权限,请参阅权限概览. 背景 A ...