文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript(十三)

用户单击重置按钮重置表单时，会触发 reset 事件，利用这个机会，我们可以在必要时取消重置操作。 表单字段 可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。...这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。...，表示当前字段是否只读 type: 当前字段的类型，如 “checkbox”、”radio” 等等 value: 当前字段将被提交给服务器的值 共有的表单字段方法 每个表单字段都有两个方法: focus...在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。...共有的表单字段事件 所有表单字段都支持下列 3 个事件: blur: 当前字段失去焦点时触发 focus: 当前字段获得焦点时触发 change: 对于 input 和 textarea 元素，在它们失去焦点且

3.3K20

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并失去焦点时触发；对于<select...');//把非数字都替换成空 }); 自动切换焦点 为了增加表单字段的易用性，很多字段在满足一定条件时(比如长度)，就会自动切换到下一个字段上继续填写。

4.8K101
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    表单脚本

    ；等价于HTML中的action特性 elements 表单中所有控件的集合（HTMLCollection） enctype 请求的编码类型；等价于HTML中的enctype特性 length 表单中控件的数量...表单字段 form.elements，获取表单中所有控件集合（HTMLCollection）。...对文件字段来说，这个属性是只读的，包含着文件在计算机的路径 （2）表单字段方法 foucs()获取焦点，激活字段，使其可以响应键盘事件 blur()失去交单。... （3）表单字段事件 blur：当前字段失去焦点触发 change：对于和元素，在它们失去焦点且value值改变时触发；对于元素，在其选项改变时触发...focus：当前字段获取焦点时触发 表单错误提示流程：利用focus事件修改文本框的背景颜色，以便清楚表明这个字段获取了焦点；利用blur事件恢复文本框的背景颜色；利用change事件在用户输入了非规定字符时提示错误

    4.8K41

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    一、案例需求 实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体的 ; 二、案例核心要点 1、获取焦点事件 - onfocus 事件 在 JavaScript 中 ,...当 DOM 元素 获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 当 用户 点击输入框 或 通过键盘切换到输入框时..., 该事件会被触发 ; 绑定 onfocus 事件的方法 : 设置 onfocus 属性 : 可以 通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素上时要执行的JavaScript...- onblur 事件 在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或...按下 Tab 键 移动 焦点时 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的

    14210

    HTML 表单和约束验证的完整指南

    并为此经常管辖约束上或理事什么应该和不应该被输入到每个表单域的规则- 。...HTML 输出字段 除了输入类型，HTML5 还提供只读输出： output: 计​​算或用户操作的文本结果 progress: 带有value和max属性的进度条 meter：它可以根据对设定的值绿色...你可以： 停止验证，直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML 中无法实现的自定义验证。...Mozilla 文档解释说： invalid每个无效字段也会触发一个事件。这不会冒泡：必须将处理程序添加到使用它的每个控件中。...该valitity.valid属性执行相同的操作，但checkValidity()还会invalid在该字段上触发一个可能有用的事件。

    8.4K40

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

    通信在实质上必须是无状态的，从客户端到服务器的每个请求都必须包含理解请求所需的所有信息，并且不能利用服务器上存储的任何上下文。...聚焦 不同于 HTML 文档中的其他元素，表单字段可以获取键盘焦点。当点击或以某种方式激活时，他们会成为激活的元素，并接受键盘的输入。 因此，只有获得焦点时，你才能输入文本字段。...它是一个可以被指定为没有值的属性 - 事实上它出现在所有禁用的元素中。...这些字段可以用 JavaScript 进行控制和读取。内容改变时会触发change事件，文本有输入时会触发input事件，键盘获得焦点时触发键盘事件。...当一个表单被提交时，会触发其submit事件，JavaScript 处理器可以通过调用preventDefault来禁用默认的提交事件。表单字段的元素不一定需要被包装在标签中。

    3.9K20

    【前端基础篇】JavaScript之DOM介绍

    一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略. JavaScript中的常见DOM文档事件 1....缺点： 在某些老旧浏览器（如 IE8 及更早版本）中不支持。 2. click click事件发生在用户点击一个元素（例如按钮、链接或图片）时。此事件通常用于触发特定动作。...; }); 解释： 当用户将鼠标悬停在ID为 hoverElement 的元素上时，控制台将打印一条消息。 5. submit submit 事件在表单提交时触发。...7. focus 和 blur focus 事件在元素获得焦点时触发，而 blur 事件在元素失去焦点时触发。这些事件常用于表单字段的验证或提示。...8. change change 事件在用户改变输入元素的值后触发，常用于 input、select、textarea 等表单元素。

    11710

    前端架构师之01_JQuery

    元素 :even 获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始 $("li :even")获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个表单选择器 选择器 功能描述 :input 获取页面中的所有表单元素，包含以及元素 :text 选取页面中的所有文本框 :password 选取所有的密码框...分类 方法 说明 表单事件 blur([[data],function]) 当元素失去焦点时触发 表单事件 focus([[data],function]) 当元素获得焦点时触发 表单事件 change...([[data],function]) 当元素的值发生改变时触发 表单事件 focusin([data],function) 在父元素上检测子元素获取焦点的情况 表单事件 focusout([data]...,function) 在父元素上检测子元素失去焦点的情况 表单事件 select([[data],function]) 当文本框（包括和）中的文本被选中时触发 表单事件

    6800

    前端架构师之11_JavaScript事件

    用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。...这个对象中包含着所有与事件相关的信息，包括发生事件的DOM元素、事件的类型以及其他与特定事件相关的信息。...var event = e || window.event; 2.2 常用属性和方法 在事件发生后，事件对象event中不仅包含着与特定事件相关的信息，还会包含一些所有事件都有的属性和方法。...window.onload = function() { // JavaScript代码 }; 3.2 焦点事件 在Web开发中，焦点事件多用于表单验证功能，是最常用的事件之一。...事件名称 事件触发时机 focus 当获得焦点时触发（不会冒泡） blur 当失去焦点时触发（不会冒泡） 3.3 鼠标事件 鼠标事件是Web开发中最常用的一类事件。

    7410

    JavaScript 事件基础补充

    JavaScript事件处理函数及其使用列表 事件处理函数 影响的元素 何时发生 onabort 图像 当图像加载被中断时 onblur 窗口、框架、所有表单对象 当焦点从对象上移开时 onchange...输入框，选择框和文本区域 当改变一个元素的值且失去焦点时 onclick 链接、按钮、表单对象、图像映射区域 当用户单击对象时 ondblclick 链接、按钮、表单对象 当用户双击对象时 ondragdrop...单击表单的reset按钮 onresize 窗口 当选择一个表单对象时 onselect 表单元素 当选择一个表单对象时 onsubmit 表单 当发送表格到服务器时 PS：所有的事件处理函数都会都有两个部分组成...1.鼠标事件，页面所有元素都可触发 click：当用户单击鼠标按钮或按下回车键时触发。...input.onfocus = function () { alert('Lee'); }; blur：当页面或元素失去焦点时在window及相关元素上触发。

    3.1K50

    Window对象

    console: 提供了向浏览器控制台输出日志信息的方法。 crypto: 此对象允许网页访问某些加密相关服务。...frameElement: 返回嵌入当前window对象的元素，如或，如果当前window对象已经是顶层窗口,则返回null。...onchange: 窗口内表单元素的内容改变时触发。 oninput: 窗口内表单元素获取用户输入时触发。 onreset: 窗口内表单重置时触发。...onselect: 窗口内表单元素中文本被选中时触发。 onsubmit: 窗口内表单中submit按钮被按下触发。 onhashchange: 当窗口的锚点哈希值发生变化时触发。...onmouseout: 鼠标移出窗口时触发。 onmouseover: 鼠标移动到窗口时触发。 onauxclick: 指示在输入设备上按下非主按钮时触发，例如鼠标中键。

    2.5K20

    对话框、模态框和弹出框看起来很相似，它们有何不同？

    受限焦点 有时焦点被限制 (或被困在) 特定元素中，这意味着如果焦点在这个元素上，无论按 Tab 还是 Shift + Tab 键，也永远不会切换到元素外面的元素。...您可以在对话框中包含一个以 method="dialog" 提交的表单。该表单将在提交时关闭对话框。 例子 插入链接对话框，其背后为暗色背景。...常见问题 焦点应该移到哪里？ 当模态对话框打开时，键盘焦点应该移动到默认操作。如果存在表单，很可能是第一个表单字段。...对于弹出窗口，它只在“有意义的地方”的情况下执行（请参阅弹出窗口解释器）。如果用户没有触发它，将它移动到 DOM 中较早的适当位置。 当模态对话框关闭时：如果用户触发了它，将焦点返回到触发器。...一些例子： 国家选择器 您正在为在线商店构建结账表单。在一个字段中，用户需要选择一个国家。他们最终必须选择这个国家，因为它是必需的字段。

    4K00

    5、React组件事件详解

    ）； 注意：事件的回调函数被绑定在React组件上，而不是原始的元素上，即事件回调函数中的 this所指的是组件实例而不是DOM元素； 了解更多React中的thisReact组件中的this。...单击触发react事件 React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React...这些焦点事件工作在 React DOM 中所有的元素上 ，不仅是表单元素。...4、表单事件 onChange onInput onSubmit onChange事件经过React改良，内容改变时即可实时触发；而原生的需内容改变且失去焦点后触发才触发。...即，最终控制台输出为： 原生事件绑定事件触发 合成事件绑定事件触发 阻止冒泡 如果在onDOMClick中调用e.stopPropagtion() onDOMClick(e){

    3.7K10

    小程序-云开发-如何对敏感词进行过滤即内容安全的检测(下)

    作者 | 随笔川迹 ID | suibichuanji 前言 撰文:川川 您将在本文中学习另外一种方式如何在小程序中对一段文本进行检测是否含有违规内容 云函数中进行简单的配置一下,就可以实现文本内容的校验...小程序端进行文本内容的弱校验,减少API的请求 如何将涉及违规的文本内容用*号代替,进行过滤处理 云函数调用方式的优点(推荐使用) 本文重点在于 学会如何在小程序云开发中的云函数后端进行配置,实现文本内容的校验...(上)中通过在小程序端请求云函数msgSecCheck1,通过request,request-promise请求微信提供的内容安全接口以及获取access_token,实现了对小程序端输入文本内容安全的检测...如果您之前有动手实践过的话,您依然发现,这个过程仍然很复杂,分别要请求两个接口,还要拼接字段,还要手动的去查找APPID,以及APPSECRET秘钥 在如今的云开发中,提供了文本内容检测的接口,只需要简单的配置一下就可以了的...事件的触发应该是在失去焦点的时候,就进行常规自定义文文本内容校验的 /** * * 您也是可以单独将自定义的违规词汇放到一个utils文件,单独js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的

    3.1K10

    梳理下常见的不冒泡事件

    Focus 事件 事件触发顺序见下表： Event Type Notes User shifts focus focusin 第一个目标元素获得焦点之前触发 focus 第一个目标元素获得焦点之后触发...User shifts focus focusout 第一个目标元素失去焦点之前触发 focusin 第二个目标元素获得焦点之前触发 blur 第一个目标元素失去焦点之后触发 focus 第二个元素获得焦点之后触发...该事件包括三个： •compositionstart 输入法编辑器打开状态，准备输入•compositionupdate 向输入字段插入新字符时触发•compositionend 输入法编辑器关闭时触发...•DOMNodeInsertedIntoDocument 不冒泡 ❌•DOMNodeRemovedFromDocument 不冒泡 ❌ 另外，html 中表单验证合法性 invalid 事件也是不冒泡的...不冒泡 ❌•等等 html5 的 online offline、notification、push 等事件也都是不冒泡的；针对特定资源的 Progress 事件如 abort、load、progress

    1.3K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券