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

与onChange不同,使用onBlur时重置表单

是指在表单元素失去焦点时触发事件,并在事件处理函数中重置表单的值。

onBlur是一个React中的事件,用于处理表单元素失去焦点的情况。与之相对的是onChange事件,它在表单元素的值发生变化时触发。

使用onBlur重置表单的主要目的是在用户离开表单元素时,将表单恢复到初始状态,以便用户重新输入。这在一些情况下非常有用,比如在表单提交前进行数据验证或者在用户输入错误后提供重置选项。

以下是一个使用onBlur重置表单的示例:

代码语言:txt
复制
import React, { useState } from 'react';

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleBlur = () => {
    setName('');
    setEmail('');
  };

  return (
    <form>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} onBlur={handleBlur} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} onBlur={handleBlur} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

在上述示例中,当输入框失去焦点时,handleBlur函数会被调用,将name和email的状态重置为空字符串,从而重置表单的值。

使用onBlur重置表单可以提供更好的用户体验,让用户在输入错误后能够方便地重新填写表单,同时也可以帮助开发者进行表单数据的验证和处理。

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

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动推送:https://cloud.tencent.com/product/umeng_push
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云视频处理服务:https://cloud.tencent.com/product/vod
  • 腾讯云音视频通信(TRTC):https://cloud.tencent.com/product/trtc
  • 腾讯云云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云云原生数据库TDSQL:https://cloud.tencent.com/product/tdsql
  • 腾讯云云原生存储CFS:https://cloud.tencent.com/product/cfs
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML事件属性--DOM

打开一个新页面或者刷新的时候触发 demo查看 相当于onload,加载页面触发,但是在不同浏览器触发的有所不同 第一次加载页面,onpageshow在ie浏览器中不触发,其他情况都触发 11.onresize...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本, 14.onredo 当文档执行撤销触发的事件 二、form事件属性 由html表单内触发的事件,通常使用在form元素中 1.onblur...=myfun()的事件,当input失去焦点的时候产生什么样的效果 demo查看 2.onfocus 元素获得焦点触发事件,和onblur相反 demo查看 3.onchange 当元素值被改变的时候触发事件...required属性来使用 required如果使用该属性,代表必填字段,oninvalid是当元素无效触发的事件 function myfun() { alert('填写为空') } demo查看 8.onreset 表单重置按钮被点击触发

3.7K20

JavaScript 事件基础补充

虽然内联在早期使用较多,但它是和HTML混写的,并没有HTML分离。...JavaScript事件处理函数及其使用列表 事件处理函数 影响的元素 何时发生 onabort 图像 当图像加载被中断 onblur 窗口、框架、所有表单对象 当焦点从对象上移开 onchange...表单复位按钮 单击表单的reset按钮 onresize 窗口 当选择一个表单对象 onselect 表单元素 当选择一个表单对象 onsubmit 表单 当发送表格到服务器 PS:所有的事件处理函数都会都有两个部分组成...input.onchange = function () { alert('Lee'); }; focus:当页面或者元素获得焦点在window及相关元素上面触发。...form.onsubmit = function () { alert('Lee'); }; reset:当用户点击重置按钮在元素上触发。

3.1K50

表单验证和正则表达式

第一部分:form表单基础 表单验证使用onblur还是onchange....表单验证的作用:把输入的表单数据传入给JavaScript代码进行验证,可以让网络应用程序更加可靠,也能减少服务器的负担,同时减少客户端服务器的带宽。...form对象是一个数组,负责存储表单中所域的值,但它的数组元素并非利用数值索引存储,而是使用域独有的name属性设定的标示符。在后台服务器接收form表单域的值也是通过name来作为标示符的。...onchange事件不可以用于验证表单域的值是否为空。onblur事件适合触发数据验证。如何处理用户复制/粘贴文本到表单域中?...(onblur和onfocus是相反事件) onblur事件:表单域失去焦点触发。 onfocus事件:表单元素或表单域获得输入的焦点触发。

1.9K50

开发者需要掌握的JS事件

JavaScript事件 事件通常函数配合使用,这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在,事件通常可以修饰多种对象。...,将js代码HTML元素代码分离开,更加方便统一管理维护。...问题:HTML 元素添加事件, JS添加事件是否可以完全等价? 在实际开发中,如果传参数,使用HTML元素绑定事件,如果不传参数,使用JS绑定事件。传参数也可以使用JS绑定事件【使用匿名函数】。...event对象 火狐没有全局event对象,必须在发生事件,产生一个event对象 ,传递默认方法 6.form的提交、重置事件 submit/reset onsubmit = "return validateForm..." 对表单进行校验 7.改变事件 onchange 制作select联动效果 ---- 省市联动 重点 : onclick 、onchangeonblur、 onsubmit 8.默认事件的阻止和传播阻止

2.4K80

浏览器事件

浏览器事件 常用浏览器事件DOM事件,包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。...onmessage: 窗口对象接收消息事件触发。 onchange: 窗口内表单元素的内容改变触发。 oninput: 窗口内表单元素获取用户输入时触发。...onreset: 窗口内表单重置触发。 onselect: 窗口内表单元素中文本被选中触发。 onsubmit: 窗口内表单中submit按钮被按下触发。...ontoggle: 该事件在用户打开或关闭元素触发。 表单事件相关 onblur: 元素失去焦点触发。 onchange: 该事件在表单元素的内容改变触发。...onreset: 表单重置触发。 onsearch: 用户向搜索域输入文本触发。 onselect: 用户在输入框内选取文本触发。 onsubmit: 表单提交触发。

2.3K20

再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表

事件通常函数结合使用,函数不会在事件发生前被执行!...onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。...(<body 和 <frameset) 2 表单事件 属性 描述 DOM onblur 元素失去焦点触发 2 onchange 该事件在表单元素的内容改变触发( <input, <keygen,...元素获取用户输入时触发 3 onreset 表单重置触发 2 onsearch 用户向搜索域输入文本触发 (<input="search") onselect 用户选取文本触发 ( <input...使用onwheel 事件替代 ononline 该事件在浏览器开始在线工作触发。 onoffline 该事件在浏览器开始离线工作触发。

2.1K40

1-html标签介绍

标签全局标准属性 规定了8个全局标准属性 class属性 用于定义元素的类名 id属性 用于指定元素的唯一id 注意该属性的值在整个HTML文档中具有唯一性 style属性 用于指定元素的行为样式 使用该属性后将会覆盖任何全局的样式设定...form表单事件 onblur当元素失去焦点触发 onchange在元素的元素值被改变触发 onfocus当元素获得焦点触发 onreset当表单中的重置按钮被点击触发 onselect在元素中文本被选中后触发...onsubmit在提交表单触发 keyboard键盘事件 onkeydown在用户按下按键触发 onkeypress在用户按下按键后,按着按键触发。...onmousedown当元素上按下鼠标按钮触发 onmousemove当鼠标指针移动到元素上触发 onmouseout当鼠标指针移出元素触发 onmouseover当鼠标指针移动到元素上触发...onmouseup当在元素上释放鼠标按钮触发 media媒体事件 onabort当退出触发 onwaiting当媒体已停止播放但打算继续播放触发。

91410

HTML标签介绍「程序员培养之路第一天」

2、id属性 用于指定元素的唯一id 要注意该属性的值在整个HTML文档中要具有唯一性 3、style属性 用于指定元素的行内样式 使用该属性后将会覆盖任何全局的样式设定 4、title属性 用于指定元素的额外信息...onunload:在用户从页面离开发生,例如点击跳转,页面重载,关闭浏览器窗口等。 2、Form表单事件     onblur:当元素失去焦点触发。    ...onchange:在元素的元素值被改变触发。     onfocus:当元素获得焦点触发。     onreset:当表单中的重置按钮被点击触发。    ...onsubmit:在提交表单触发。 3、Keyboard键盘事件     onkeydown:在用户按下按键触发。     onkeypress:在用户按下按键后,按着按键触发。...onmousedown:当在元素上按下鼠标按钮触发。     onmousemove:当鼠标指针移动到元素上触发。     onmouseout:当鼠标指针移出元素触发。

84710

原生js获得八种方式,事件操作

document.documentElement是专门获取html这个标签的 获取body的方法(document.body) document.body是专门获取body这个标签的 二.事件句柄 属性 当以下情况发生,...出现此事件 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像发生某个错误...某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击...onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 三.使用方法 1.获取单个元素 2.单个元素发送的事件 3.发生的内容相关替换...inp.onkeydown = function () { console.log('按下') }; 四.提取元素里面的内容 innerHTML:获取文本包括标签 innerText:获取文本不包括标签 val:获取表单里面的值

3.3K10

React动态添加标签组件

背景 在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式 需求 可以指定空状态的标题 设置标签颜色 每个标签的最大长度...={(e) => setInputValue(e.target.value)} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm...join(separator) }); }; 编辑状态 当我们处于编辑状态的时候,打开表单后,它原本就有内容了 监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中 useEffect((...={(e) => setInputValue(e.target.value)} onBlur={handleInputConfirm} onPressEnter=...={(e) => setInputValue(e.target.value)} onBlur={handleInputConfirm} onPressEnter=

36560

HTML属性及事件

HTML属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现 如:class=”a” 不同属性之间用“空格”隔开 HTML属性和属性值之间用...存储空间中的数据发生变化时)运行脚本 onundo 当文档执行撤销时运行脚本 onunload 当用户离开文档时运行脚本 表单事件 属性 描述 onblur 当元素失去焦点时运行脚本 onchange...当元素改变时运行脚本 oncontextmenu 当触发上下文菜单时运行脚本 onfocus 当元素获得焦点时运行脚本 onformchange 当表单改变时运行脚本 onforminput 当表单获得用户输入时运行脚本...oninput 当元素获得用户输入时运行脚本 oninvalid 当元素无效时运行脚本 onreset 当表单重置时运行脚本。...ontoggle 当用户打开或关闭 元素触发

2.7K20
领券