前情

最近在做需求开发时候，需要监听表单的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. Figma 学习笔记 – Text

    结构 Figma 的字都会有一个 wrapper 控制 width. 虽然它是看不见的. 但是你要知道它有那个概念存在. 按 T 键, 然后鼠标点击或拉就可以做出一个 text 了. 基本配置 我顺着 ...

  2. SuperMap iServer&iPortal&iEdge结合CAS 5.3服务器实现单点登录

    2023-10-19 更新,由于阿里云maven镜像仓库里缺失了很多CAS5.3 依赖,如果缺少可以用附件里的同步到本地仓库 链接:https://pan.baidu.com/s/14DhRci_Am ...

  3. SXYZ-7.3训练赛

    T1 房 啥啥啥,T1又又又爆了,整个人精神状态 良好. 解题思路 考虑数据保证任意两个房子不重合 建一个结构体存两边 最后判断一下 \(>t\) 加两个 \(==t\) 加一个 == 但是!! ...

  4. 填坑 CentOS7 使用 Python3 安装 Cython 编写扩展

    前文参见 <CentOS 7 下通过 Cython 编写 python 扩展>, 用的是 Python2.7,本文用的是 Python3.6 yum install python3 pyt ...

  5. Linux Kernel Utilization Clamping简介

    随着linux内核调度技术的不断演进,目前存在多个调度类(stop.deadline.rt.cfs.idle)以满足不同性质和要求的任务(task)的调度需求.对于用户空间来说,完全公平调度器(CFS ...

  6. 2024年2月中国数据库排行榜：PolarDB夺魁首登顶，TiDB攀升回探花

    银装素裹覆大地,春意初醒待来临.2024年2月墨天轮中国数据库流行度榜单出炉,表现最亮眼的无疑是PolarDB,其自23年7月以来一路高歌猛进,此次更是一举夺魁,彰显了云原生数据库的蓬勃发展态势,Oc ...

  7. yarn serve 不能开启vue项目 the project seem to require yarn but isnot install

    error: answer: 删除 yarn.lock 或者使用 npm run serve 替换 ; ps: yarn.lock 是锁定第三方包版本的文件:

  8. excel导⼊功能的实现流程简要描述⼀下？

    当时公司的场景⼤概⼀个excel⽂件⾥就⼏⼗条数据,量⽐较少,和后端商量之后制定了前端主导的⽅ 案,解析的过程放到了浏览器端做,当时是参考了⼀下vue-admin中的现成的⽅案 ⼤概流程是这样的,⼈事 ...

  9. 分享一个很好用的代理转发工具：rinetd

    rinetd介绍: 安装与使用:https://zhuanlan.zhihu.com/p/530875131 注意事项: 1.如果发现配置中的端口在进程中没找到,那就是配置填写错误导致的,笔者就遇到过 ...

  10. nginx实现资源文件动静分离的记录

    Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用 Nginx 处理静态页面,Tomcat ...