首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过`addEventListener`中的blur事件获取所有表单输入值?

通过addEventListener中的blur事件获取所有表单输入值的方法如下:

  1. 首先,获取所有的表单元素。可以通过document.getElementsByTagName('input')document.querySelectorAll('input')来获取所有的输入框元素。
  2. 然后,使用addEventListener方法为每个输入框元素添加blur事件监听器。在事件处理函数中,可以通过event.target.value来获取当前输入框的值,并将其保存到一个数组或对象中。
  3. 最后,当用户离开任何一个输入框时,触发blur事件,事件处理函数会将当前输入框的值保存到数组或对象中。

以下是一个示例代码:

代码语言:txt
复制
// 获取所有的输入框元素
var inputs = document.getElementsByTagName('input');

// 定义一个对象来保存输入框的值
var formValues = {};

// 为每个输入框添加blur事件监听器
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('blur', function(event) {
    // 获取当前输入框的值
    var value = event.target.value;
    
    // 获取当前输入框的name属性作为键名
    var name = event.target.name;
    
    // 将值保存到formValues对象中
    formValues[name] = value;
  });
}

在上述代码中,我们通过getElementsByTagName方法获取了所有的输入框元素,并使用addEventListener方法为每个输入框添加了blur事件监听器。在事件处理函数中,我们通过event.target.value获取当前输入框的值,并使用event.target.name获取当前输入框的name属性作为键名,将值保存到formValues对象中。

通过上述方法,我们可以获取到所有表单输入框的值,并保存在formValues对象中,可以根据需要进一步处理或提交这些值。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云函数(云原生、人工智能):https://cloud.tencent.com/product/scf
  • 腾讯云数据库(数据库):https://cloud.tencent.com/product/cdb
  • 腾讯云服务器(服务器运维):https://cloud.tencent.com/product/cvm
  • 腾讯云对象存储(存储):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(区块链):https://cloud.tencent.com/product/tbaas
  • 腾讯云物联网开发平台(物联网):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动推送(移动开发):https://cloud.tencent.com/product/tpns
  • 腾讯云音视频处理(音视频、多媒体处理):https://cloud.tencent.com/product/mps
  • 腾讯云网络安全(网络安全):https://cloud.tencent.com/product/ddos
  • 腾讯云CDN加速(网络通信):https://cloud.tencent.com/product/cdn
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

微信小程序-如何获取用户表单控件

背景 在小程序开发,经常有用到表单,我们往往需要在小程序端获取用户表单输入(通常用户输入有:switch,input,checkbox,slider,radio,picker)等,通过触发事件...,然后提交给后端处理 那么在小程序当中有哪些方式可以获取表单呢,又怎么通过表单提交方式获取用户输入呢 换言之,若提交按钮在form之外,又如何实现表单提交呢 在小程序中有两种方式可以获取表单...form 表单获取表单组件 这是最普遍通用一种方法,所有用户输入组件放置在form内,当点击form表单form-type为submitbutton组件时 它会将表单组件value进行提交...,而非form表单形式提交数据,需要给表单组件绑定bindchang,通过事件对象方式获取组件数据 这个是有应用场景,比如:如下下面小程序页面爱鼓励页面,就是用非表单方式提交数据,...form结合button组合方式,这种方式有局限性,所有表单组件都需要在form内,通过表单组件内设置name方式获取表单组件(必须要设置,否则拿到表单组件就是`undefined`

7.1K11

解决blur与click冲突

在开发我们会经常遇到blur和click冲突情况。下面叙述了开发中常遇到“下拉框”问题,并提供了两种解决方案。...一、blur和click事件简述 blur事件:当元素失去焦点时触发blur事件;其为表单事件blur和focus事件不会冒泡,其他表单事件都可以。...click 二、下拉框blur和click事件冲突,导致不能正常选择 实际开发,我们会经常遇到某一下拉列表框,点击其他元素消失列表框;点击下拉框子元素使其生效需求。...console.log("执行"); $("input").val($(this).text()); }); })(jQuery); 执行上述代码,会出现一个问题,并不能正确获取下拉框...而在本示例,由于blur处理程序,会将对应下拉框展示区隐藏,所以导致其后续click事件并不会执行。上述console信息也不会被输出。

3K31
  • 解决blur与click冲突

    在开发我们会经常遇到blur和click冲突情况。下面叙述了开发中常遇到“下拉框”问题,并提供了两种解决方案。...一、blur和click事件简述 blur事件:当元素失去焦点时触发blur事件;其为表单事件blur和focus事件不会冒泡,其他表单事件都可以。...click 二、下拉框blur和click事件冲突,导致不能正常选择 实际开发,我们会经常遇到某一下拉列表框,点击其他元素消失列表框;点击下拉框子元素使其生效需求。...console.log("执行"); $("input").val($(this).text()); }); })(jQuery); 执行上述代码,会出现一个问题,并不能正确获取下拉框...而在本示例,由于blur处理程序,会将对应下拉框展示区隐藏,所以导致其后续click事件并不会执行。上述console信息也不会被输出。

    1.8K20

    表单脚本

    获取页面所有表单,然后通过数值索引获取对应表单 var firstForm = document.forms[0]; 方式3:通过document.forms获取页面所有表单,然后页面form表单名称获取对应表单...表单字段 form.elements,获取表单所有控件集合(HTMLCollection)。...对文件字段来说,这个属性是只读,包含着文件在计算机路径 (2)表单字段方法 foucs()获取焦点,激活字段,使其可以响应键盘事件 blur()失去交单。...focus:当前字段获取焦点时触发 表单错误提示流程:利用focus事件修改文本框背景颜色,以便清楚表明这个字段获取了焦点;利用blur事件恢复文本框背景颜色;利用change事件在用户输入了非规定字符时提示错误...在项目中validate插件,只用到了blur和focus事件。因为某些浏览器blur事件会先于change事件;有些会恰好相反!

    4.8K41

    【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体操作细节 | 获取 Activity 所有方法 | 获取方法上注解 | 获取注解上注解 | 通过注解属性获取事件信息 )

    文章目录 前言 一、获取 Activity 所有方法 二、获取方法上注解 三、获取注解上注解 四、通过注解属性获取相关事件信息 前言 Android 依赖注入核心就是通过反射获取 类 / 方法.../ 字段 上注解 , 以及注解属性 ; 在 Activity 基类 , 获取该注解 以及 注解属性 , 进行相关操作 ; 在博客 【IOC 控制反转】Android 事件依赖注入 ( 事件三要素...; 拦截相应 onClick , onLongClick , onTouch 方法 , 执行自己方法 , 其它方法正常执行 ; 一、获取 Activity 所有方法 ---- 通过反射获取...Activity 类 , 然后调用 Class getDeclaredMethods 方法 , 获取 Activity 所有方法 ; // 获取 Class 字节码对象 Class<?...); 二、获取方法上注解 ---- 获取方法所有注解 , 获取是 @OnClick({R.id.textView}) // 事件注入 注解 ; 调用 Method 方法 getDeclaredAnnotations

    3K20

    如何在 WPF 获取所有已经显式赋过依赖项属性

    获取 WPF 依赖项属性时,会依照优先级去各个级别获取。这样,无论你什么时候去获取依赖项属性,都至少是有一个有效。有什么方法可以获取哪些属性被显式赋值过呢?...如果是 CLR 属性,我们可以自己写判断条件,然而依赖项属性没有自己写判断条件地方。 本文介绍如何获取以及显式赋值过依赖项属性。...---- 需要用到 DependencyObject.GetLocalValueEnumerator() 方法来获得一个可以遍历所有依赖项属性本地。...} } 这里 value 可能是 MarkupExtension 可能是 BindingExpression 还可能是其他一些可能延迟计算提供者。...因此,你不能在这里获取到常规方法获取依赖项属性真实类型。 但是,此枚举拿到所有依赖项属性都是此依赖对象已经赋值过依赖项属性本地。如果没有赋值过,将不会在这里遍历中出现。

    19840

    【Vue原理】VModel - 源码版之input详解

    研究基于 Vue版本 【2.5.17】 如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】VModel - 源码版之input详解 上一篇文章,我们大概讲了所有表单元素双绑原理...} 看到我标红地方,这句话就是完成预输入延迟更新重点 当composing=true时,事件回调不会走到下面的更新操作,而 Vue 正式通过这个标志位,判断现在是否是预输入而确定是否需要实时更新...在输入拼音时候,每打一个拼音字母都会触发 input 事件,但是我们根本还没往表单写入我们预想东西 而此时触发 input 事件没有任何意义,因为还不是我们要输入,这是一个浪费操作 刚好,...,会触发 在预输入延迟更新起什么作用呢?...', '$forceUpdate()'); } } 对于 trim 和 number,Vue 会对表单做处理,你可以看到源码 trim:会调用 trim 方法 number:会调用

    93620

    Web APIs第二天

    事件类型 1.鼠标事件/鼠标触发 click鼠标点击、mouseenter鼠标经过、mouseleave鼠标离开 2.焦点事件/表单获得光标 focus获得焦点、blur失去焦点 3.键盘事件/键盘触发...Keydown键盘按下触发、Keyup键盘抬起触发 4.文本事件/表单输入触发 input用户输入事件 1....购物车加减操作 ①给添加按钮注册点击事件, 获取表单value,然后自增 ②解除减号disabled状态 ③给减号按钮添加点击事件,获取表单value,然后自减 ④自减结束需要判断,如果结果小于等于...高阶函数 高阶函数可以被简单理解为函数高级应用,JavaScript 函数可以被当成【】来对待,基于这个特性实现函数高 级应用 【】就是 JavaScript 数据,如数值、字符串、布尔、...编程思想 1.排他思想 当前元素为A状态,其他元素为B状态 干掉所有人, 使用for循环 复活他自己, 通过this或者下标找到自己或者对应元素 第1个</button

    1.1K60

    JavaScript 表单处理

    服务器能够处理字符集 action 接受请求URL elements 表单所有控件集合 enctype 请求编码类型 length 表单控件数量 name 表单名称 target 用于发送请求和接受响应窗口名称...但使用原生DOM访问虽然比较通用,但不是很便利。表单处理,我们建议使用HTML DOM,它有自己elements属性,该属性是表单所有元素集合。...fm.elements[0];//获取第一个表单字段元素 fm.elements['user'];//获取name是user表单字段元素 fm.elements.length;//获取所有表单字段数量...在某些浏览器blur事件会先于change事件发生;而在其他浏览器,则恰好相反。...虽然在字面上有value,而却没有,但通过都可以通过value获取他们

    4.8K101

    常用键盘事件

    4.键盘事件对象keyCode属性可以得到相应键ASCLL码 使用keyCode属性判断用户按下哪个键 // 键盘事件对象keyCode属性可以得到相应键...// 判断keyCode if (e.keyCode === 83) { // 触发输入获得焦点事件 search.focus...(); } }) 1.4 案例:模拟京东快递单号查询 要求:当我们在文本框输入内容时,文本框上面自动显示大字号内容。...案例分析   快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)        表单检测用户输入: 给表单添加键盘事件        同时把快递单号里面的(value)获取过来赋值给...,隐藏放大提示盒子 jd_input.addEventListener('blur', function() { con.style.display =

    3.1K10

    JavaScript案例:按键输入内容,模拟自动大字号

    使用键盘事件对象里面的keyCode判断用户按下是否是s键 输入框获得焦点,使用jsfocus()方法 var...e.keyCode == 83) { input.focus(); } }) 模拟自动大字号 要求:当我们在文本框输入内容时...输入内容时,上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入:给表单添加键盘事件 同时把表单里面的(value)获取过来赋值给con盒子(innerText)作为内容 如果表单输入框里面的内容为空...注意:keydown和keypress在文本框里面的特定,他们俩个事件触发时候,文字还没有落入文本框。keyup触发时候,文字已经落入文本框中了。 <!...('blur', function () { con.style.display = 'none'; }) jd_input.addEventListener

    1.8K50

    JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

    在 JavaScript ,鼠标事件是 Web 开发中最常用事件类型,本篇算是笔记吧。...鼠标事件:在DOM2.0,W3C对鼠标事件作了现范,鼠标事件被解析为MouseEvent(我们可以用e.constructor == MouseEvent来判断其是否为鼠标事件。...focus:获取焦点blur:失去焦点mouse事件click、dblclick 没有什么好讲,contextmenu用也不多讲。重点讲下mouse事件。...'))    test.addEventListener('touchend',()=>console.log('touchend'))    看看结果如何...需要注意是:移动端,普通元素是不会触发 focus 与blur,只有表单元素才会触发,如input输入框执行顺序是 tochstart -》touchend-》-》mousedown-》focus-

    3.6K21

    js 事件笔记

    2、常见事件 事件是某个行为或者触发,比如点击、鼠标移动、提交表单,滚动菜单等等 二、事件流 1、事件作用 事件流描述是从页面接收事件顺序,比如有两个嵌套div,点击了内层div,这时候是内层...3.4 removeEventListener解绑事件 通过addEventListener添加事件处理程序只能通过removeEventListener移除,移除时参数与添加时候相同 添加匿名函数无法移除...2、举个栗子 需求:给container里面所有box都绑定点击事件,点击时输出box 2.1方式一:foreach 原理:选中.box所有元素,得到一个类数组对象,遍历这个类数组对象,给.box元素一一绑...六、常见事件类型 常见事件类型 解析 click 单击 dblclick 双击 focus 焦点,比如表单input把光标放上去开始输入时刻 blur 失去焦点,比如输入完成切换到下一个输入框时,就失去了焦点...keyup 按键按下松开时候触发, change 比如input失去焦点并且发生了改变 submit 表单提交时候触发 scroll 页面滚动时候触发,注意使用函数节流 resize 页面面积变化触发

    11.1K21

    webapi(二)- 事件

    addEventListener('事件' , 要执行函数) 事件监听三要素 事件源:哪个dom元素被事件触发了 事件:用什么方式触发 事件调用函数 :要做什么事 例如: // 给元素注册上事件...焦点事件 表单获得光标 focus:获得焦点 blur:失去焦点 3. 键盘事件 键盘触发 keydown:键盘按下触发 keyup:键盘抬起触发 4....文本事件 表单输入触发 input:用户输入事件 高阶函数 含义 把函数当作来看待, :就是JavaScript数据,比如数值、字符串、布尔、对象等 包括 函数表达式 let counter...('click' , function() {}) 环境对象 this 事件处理函数this指向事件源 例如: let btn = document.querySelector('button')...指向事件源(即被触发事件 btn) console.log(this) }) 排他思想 干掉所有人,复活我自己 事件发生时,只有我自己生效,其他所有都不生效

    72220

    react是如何实现冒泡

    本文作者:IMWeb jerytang 原文出处:IMWeb社区 未经同意,禁止转载 react 自己实现了一套事件冒泡机制,将所有事件都用代理方式绑定到 document上。...有一个问题一直困惑我:有些事件是不支持事件冒泡,比如 blur 事件,那么 react 是如何实现这类事件冒泡?...实现方案二 anu.js 作者在 blog写道: 对于focus,blur,change,submit,reset,select等不会冒泡事件,在标准游览器,我们可以设置addEventListener...最后一个参数为true轻松搞定 巧妙使用 addEventListener 第3个捕获参数,那么首先事件就会在 root 被捕获 然后获取到 e.target 也就是 input元素,然后再通过...(`#2 ${e.target.value}`) }) 比如在兼容 react 框架 anu.js ,对不能冒泡 blur 事件是这样处理: ?

    1.8K20

    addEventListener() 方法

    提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加事件句柄。...布尔,指定事件是否在捕获或冒泡阶段执行。 可能: true – 事件句柄在捕获阶段执行 false- false- 默认。...( 和 ) 表单事件 blur 元素失去焦点时触发 change 该事件表单元素内容改变时触发( , , , 和 ) focus 元素获取焦点时触发 focusin 元素即将获取焦点是触发...focusout 元素即将失去焦点是触发 input 元素获取用户输入是触发 reset 表单重置时触发 search 用户向搜索域输入文本时触发 ( 剪贴板事件 copy 该事件在用户拷贝元素内容时触发...其他事件 message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 online 该事件在浏览器开始在线工作时触发

    94510

    JavaScript 编程精解 中文第三版 十八、HTTP 和表单

    此类文档都是通过GET方法来获取。 HTML页面可能包含表单,用户可以在表单填入一些信息然后由浏览器将其发送到服务器。如下是一个表单例子。...聚焦 不同于 HTML 文档其他元素,表单字段可以获取键盘焦点。当点击或以某种方式激活时,他们会成为激活元素,并接受键盘输入。 因此,只有获得焦点时,你才能输入文本字段。...它是一个可以被指定为没有属性 - 事实上它出现在所有禁用元素。...其可以通过其包含一个布尔checked属性来获取和更改。...当一个表单被提交时,会触发其submit事件,JavaScript 处理器可以通过调用preventDefault来禁用默认提交事件表单字段元素不一定需要被包装在标签

    3.9K20

    DOM事件

    , 12 4月 2021 作者 847954981@qq.com 前端学习, 我编程之路 DOM事件 要做一个动态网页,那就必须要网页拥有动态活动,因此对于网页上DOM对象,我们需要获取其中事件来做出相应活动...节点名.addEventListener('事件名', function () {}); 利用此方法可以获取节点上发生事件,并在之后function事件做出反应。...具体事件如下 焦点事件 focus:表单组件(Input, Textarea, etc..)获取焦点事件 blur: 表单组件(Input, Textarea, etc..)失去焦点事件 鼠标事件 click...键盘事件 keydown: 键盘按下事件 keyup: 键盘释放事件 视图事件 scroll: 文档滚动事件 resize: 窗口放缩事件 资源 load: 资源加载成功事件 可以通过以上方法结合DOM...操作更改样式属性方法,来实现动态化 事件冒泡 在JavaScript有一种情况,当你同时在父亲节点和子节点同时设置监听事件,当你触发了子节点监听事件,父节点事件也会被触发,这种现象叫做事件冒泡。

    76530
    领券