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

HTML表单onsubmit无法在某些浏览器上触发,因为它隐藏了提交按钮和只读输入

HTML表单onsubmit无法在某些浏览器上触发的原因是因为它隐藏了提交按钮和只读输入。在某些浏览器中,当表单中没有可见的提交按钮或只读输入字段时,onsubmit事件不会被触发。

onsubmit事件是在用户提交表单时触发的,通常用于验证表单数据或执行其他操作。然而,如果表单中没有可见的提交按钮或只读输入字段,某些浏览器会认为表单无法被提交,因此不会触发onsubmit事件。

为了解决这个问题,可以采取以下几种方法:

  1. 显示一个可见的提交按钮:确保表单中至少有一个可见的提交按钮,这样就能保证onsubmit事件能够在所有浏览器上触发。可以使用<input type="submit">或<button type="submit">等标签来创建提交按钮。
  2. 使用JavaScript触发提交:可以通过JavaScript代码来手动触发表单的提交,而不依赖于onsubmit事件。可以在表单验证通过后,使用form.submit()方法来提交表单。示例代码如下:
代码语言:javascript
复制
document.getElementById("myForm").submit();
  1. 检查浏览器兼容性:在开发过程中,应该注意浏览器的兼容性。可以使用现代的浏览器兼容性检测工具,如Can I use(https://caniuse.com/)来查看onsubmit事件在不同浏览器中的支持情况。

总结起来,为了确保HTML表单的onsubmit事件能够在所有浏览器上触发,应该确保表单中至少有一个可见的提交按钮,并且可以使用JavaScript代码手动触发表单的提交。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

文档元素的几何滚动

目的是避免不完整或者无效的数据通过网络提交到服务端程序。onsubmit事件只能通过单击提交按钮触发。...当用户一个文本域输入文本或从下拉列表中选择一个选项后就触发change事件,当用户一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。仅仅当用户改变了值才会触发该事件。...使用场景:对用户表单进行输入的验证 具体的后面有事件,继续写。 其过程如下 先触发onsubmit事件 → 接着调用submit()方法完成提交。...单选元素为整组有相关性的元素而设计的,组内所有按钮HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素时,返回的一个类数组对象而不是单个元素。...单选复选框都定义checked属性,指定元素当前是否选中。defaultChecked属性也为布尔值,为html的checked值,指定元素第一次加载页面时是否选中。

5.2K00

AngularDart4.0 指南- 表单

显示隐藏验证错误消息。 使用ngSubmit处理表单提交。 禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。...创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板一个组件类,以编程方式处理数据用户交互。 从课程开始,因为简要地说明了英雄编辑可以做什么。...表单底部的Submit按钮本身不做任何事情,但是由于的类型(type =“submit”),它会触发一个表单提交表单提交目前是无用的。...)="onSubmit()" #heroForm="ngForm"> 该表单从一开始就是可见的,因为提交表单之前,提交的属性为false,因为HeroFormComponent...提交的标志变为真,表格消失。 您将看到表格中显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。

17.5K30
  • 想知道HTML语法结构?看这一篇就够了(超全解析html语法)

    段落标记在段前段后各添加一个空行,而定义段落标记中的内容不受该标记的影响。 3.标题标记 HTML标记中设定6个标题标记,分别为、、、、、。...name属性 name属性用于指定表单的名称,该属性值可以由程序员自定义。 onSubmit属性 onSubmit属性用于指定当用户单击提交按钮触发的事件。...当type属性为button、resetsubmit时,指定的是按钮的显示文字;当type属性为checkboxradio时,指定的是数据项选定时的值 type属性是标记中非常重要的内容,决定输入数据的类型...普通按钮 radio 单选选项 hidden 隐藏域 checkbox 复选框 image 图像域 例:创建一个index.html的文件,该文件的标记中添加一个表单,并且表单中应用标记中添加文本框...、密码域、单选选项、复选框、文本域、隐藏域、提交按钮、重置按钮、普通按钮图像域共10个输入字段。

    5.7K30

    HTML事件属性--DOM

    研究html的对象,事件方法,从js的角度来思考,这个标签的属性是通过什么方法,触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发的事件...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本, 14.onredo 当文档执行撤销时触发的事件 二、form事件属性 由html表单触发的事件,通常使用在form元素中 1.onblur...当表单获得输入时可以触发事件 触发发不了脚本 6.onforminput 当表单获得用户输入触发的事件,无法触发 浏览器不支持 6.oninput 当元素获得用户输入触发的事件 当输入输入或者删除时都会触发...} demo查看 10.onsubmit表单提交触发 要把事件绑定到form标签里面 <!...键盘事件 1.onkeydown 按下任意键时触发,包括系统按钮,箭头功能键 demo查看 2.onkeypress 按下任意字母数字键时触发,但系统按钮,箭头功能无法识别 3.onkeyup 松开任何之前按下的键盘时触发

    3.8K20

    一步HTML5教程学会体系

    HTML5是HTML最新的版本,万维网联盟。 HTML5是下一代的HTML标准,HTML5是为了移动设备支持多媒体。...表单变化时触发 onforminput 表单获得用户输入触发 onhaschange文档变化时触发 oninput 元素获得用户输入触发 oninvalid 元素失效时触发 onkeydown...onstorage script 载入文档时触发 onsubmit script 表单提交触发。...password 用于敏感信息的自由形式的文本字段,名义没有换行符。 checkbox 预定义列表中的一组零个或多个值。 radio 一个枚举值。 submit 一个自由形式的启动表单按钮。...image 一个坐标,相对于特定图片的尺寸,额外的语义是必须是最后选中的值,同时启动表单提交。 hidden 默认不显示给用户的任意字符串。 select 枚举值,类似 radio 类型。

    1.2K20

    JavaScript 事件基础补充

    输入框,选择框和文本区域 当改变一个元素的值且失去焦点时 onclick 链接、按钮表单对象、图像映射区域 当用户单击对象时 ondblclick 链接、按钮表单对象 当用户双击对象时 ondragdrop...表单复位按钮 单击表单的reset按钮 onresize 窗口 当选择一个表单对象时 onselect 表单元素 当选择一个表单对象时 onsubmit 表单 当发送表格到服务器时 PS:所有的事件处理函数都会都有两个部分组成...对于每一个事件,都有自己的触发范围方式,如果超出了触发范围方式,事件处理将失效。 1.鼠标事件,页面所有元素都可触发 click:当用户单击鼠标按钮或按下回车键时触发。...input.onblur = function () { alert('Lee'); }; submit:当用户点击提交按钮元素触发。...form.onsubmit = function () { alert('Lee'); }; reset:当用户点击重置按钮元素触发

    3.1K50

    js – form表单提交不刷新

    大家好,又见面,我是你们的朋友全栈君。...大家已经发现, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏的iframe来实现, 主要是我们把提交目标放到一个隐藏的...我们还可以绑定onsubmit事件(用jq的话是submit()), submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次的点击触发事件失效, 否则表单又会提交一次..., 并且刷新页面) 我们可以这样: ====== 如果你用原生js的话 html代码: <input...我们绑定onsubmit的时候是把return false放进onsubmit后面的调用函数内的, 这样子如果你的函数出现错误, 将不会继续执行到函数最后’return false’这里, 还是会出现刷新的现象

    14.5K10

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

    本文中,我们将研究 HTML 表单字段 HTML5 提供的验证选项。我们还将研究如何通过使用 CSS JavaScript 来增强这些功能。 什么是约束验证? 每个表单域都有一个目的。...并为此经常管辖约束或理事什么应该不应该被输入到每个表单域的规则- 。...(但请避免使用它,因为很少有用) search 搜索输入字段 submit 一个表单提交按钮 tel 电话号码输入字段 text 文本输入字段 time 没有时区的时间选择器 url URL 输入字段...checked 复选框/收音机被选中 disabled 禁用控件(它不会被验证或提交其值) form 与使用此 ID 的表单关联 formaction 提交图像按钮提交的 URL inputmode...你可以: 停止验证,直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML无法实现的自定义验证。

    8.3K40

    React 支持 form action 是作妖?不,它是一种重磅回归

    onsubmit 就会触发,我们可以在这个回调函数里执行自己的提交逻辑。...抛开学习成本不谈,我个人认为这是一个非常好的变化,新的开发方式开发体验性能表现都有非常大的提升。...,form 会自动清空内部的所有数据,如下图所示 i如果你设置 action 的同时,又设置 onSubmit 回调,那么 onSubmit 会优先执行 4、案例 学习这些基础知识之后,我们来完成一个比较简单的案例...我们表单输入信息,并把信息记录展示一个列表中。...React 19 支持的 form action,实际是极大的利用了浏览器的自带的表单能力,它要可交互,并不需要经历水合过程,浏览器渲染成 DOM 就可以正常交互

    21110

    jquery使按钮置灰不可用

    效果演示当您在浏览器中打开包含上述HTMLjQuery代码的页面时,点击“禁用按钮按钮后,您会发现“点击我”按钮变灰且无法点击,实现按钮置灰不可用的效果。...当用户点击提交按钮后,按钮将变灰且无法再次点击,确保表单提交的一致性有效性。您可以根据实际需求扩展定制这段代码,提升用户体验操作安全性。感谢阅读!...disabled是HTML中常用的属性,用于禁用某些元素,例如按钮输入框等,使其变为不可用状态。当元素被禁用时,用户无法与该元素进行交互,无法点击按钮输入内容或选择选项等操作。1....应用场景:按钮表单提交或者某些操作需要一定时间处理时,可以将按钮设置为不可点状态,防止用户重复点击。输入框: 展示信息或者只读模式下,可以将输入框设置为不可编辑状态。2....特点:当元素被禁用时,其外观通常会发生改变,呈现灰色,并无法触发与鼠标或键盘相关的事件。被禁用的元素不会在表单提交时被包含在表单数据中,也不会被包含在表单中的序列化字符串中。

    42110

    浏览器事件

    浏览器事件 加载相关 onbeforeunload: 该事件在即将离开页面(刷新或关闭)时触发。 onload: 文档加载完成后触发。 onunload: 当窗口卸载其内容资源时触发。...onmessage: 窗口对象接收消息事件时触发。 onchange: 窗口内表单元素的内容改变时触发。 oninput: 窗口内表单元素获取用户输入触发。...onreset: 窗口内表单重置时触发。 onselect: 窗口内表单元素中文本被选中时触发onsubmit: 窗口内表单中submit按钮被按下触发。...onmouseout: 鼠标移出窗口时触发。 onmouseover: 鼠标移动到窗口时触发。 onauxclick: 指示输入设备按下非主按钮触发,例如鼠标中键。...onreset: 表单重置时触发。 onsearch: 用户向搜索域输入文本时触发。 onselect: 用户输入框内选取文本时触发onsubmit: 表单提交触发

    2.4K20

    深入讲解 ASP+ 验证

    根据用户输入更新页面控件。 触发 Page_Load 事件。 触发更改通知事件。 页面控件属性保存在一个隐藏字段中。 页面控件转换到 HTML。 再次丢弃所有内容。...客户端 API 有一个可以客户机上使用的小型 API,以便在您自己的客户端代码中实现各种效果。因为某些例程不可能隐藏,所以理论讲,您可以利用客户端验证脚本所定义的所有变量、特性函数。...在这种情况下,即使页面上有错误,您可能也希望使用该按钮提交页面。因为客户端按钮 "onclick" 事件表单的 "onsubmit" 事件之前发生,因此可能会避免提交检查,并绕过验证。...如果使用较旧的浏览器,或者关闭客户端验证,将无法调用客户端验证函数。定义该函数之前,您不必检查所用浏览器的功能,但是需要确保浏览器不会因为定义而造成脚本错误。...该模式中,服务器函数每次往返总会触发一次,客户端函数每次尝试提交时总会触发一次。您可以使用该特性来验证其它方法无法验证的控件,例如 CheckBoxList 或单独的单选按钮

    5.3K10

    【JavaScript】案例1:使用JS完成注册页面校验

    2.5.2 onclick 2.5.3 onsubmit 3. 需求分析 4. 案例代码实现 1. 需求说明 用户提交注册表单时,需要对用户的填写的数据进行校验。...人的大脑、灵魂 JavaScript 是 WEB 强大的 脚本语言 。 脚本语言: 无法独立执行。必须嵌入到其他语言中,结合使用。 直接被浏览器解析执行。... JavaScript 的语言特征及编程注意事项 特征: JavaScript 无需编译,直接被浏览器解释并执行 JavaScript 无法单独运行,必须嵌入到 HTML 代码中运行...HTML BOM 浏览器对象模型: 与浏览器交互 的方法接口 2.1.4 JavaScript 的引入方式 2.1.4.1  内部脚本 在当前页面内部写 script 标签,...2.5.2 onclick 点击事件:由鼠标或热键点击元素组件时触发 示例: 效果: 2.5.3 onsubmit 表单提交事件: 表单提交按钮被点击时 触发 注意:该事件需要返回

    3.3K70

    前端魔法堂:onsubmitsubmit事件处理函数怎么不生效呢?

    前言  最近在用Polymer增强form,使其支持表单的异步提交,但发现明明订阅onsubmitsubmit事件,却怎么也触发不了。下面我们将一一道来。...就onsubmit函数submit事件而言 方式1,方式2方式4均可依次调用onsubmit函数触发submit事件,因此可以onsubmit函数或submit事件处理函数中禁止执行默认行为来实现表单的异步提交...首先我们要明确一点的是,验证发生在与input等表单控件发生交互时(输入,点击,脚本修改其值等),而不是提交表单时才触发验证。...然后再根据表单的配置触发表单提交的方式,决定合法性验证的结果是否会阻止表单提交。...2,若input#name内容为空,则弹出非法内容警告,并阻止表单提交,不执行onsubmit触发submit事件 方式3,直接提交表单 方式4,若input#name内容为空,不弹出非法内容警告,更不会阻止表单提交

    1.9K70

    JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战

    1、事件监听机制概述 事件监听机制,指的是某些组件被执行了某种操作后,触发某些代码的执行。 事件:某些操作,如:单击、双击操作,键盘按下了,鼠标移动了。...事件源:组件,如按钮、文本输入框; 监听器:代码。 注册监听:将事件、事件源、监听器结合在一起,当事件源发生了某个事件,则触发执行某个监听代码。...:1、onsubmit 确认按钮被点击,方法返回false,则阻止表单提交                       2、onreset 重置按钮被点击 【举例】基本事件示例 2、表单验证实战 之前的用户登录博文代码的基础,添加表单校验的内容,代码如下: 表单校验

    83220
    领券