通过回车键提交form表单时需要注意的问题

2024-05-11 04:48

本文主要是介绍通过回车键提交form表单时需要注意的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

现在很多网站的登陆页面,在输入完账号密码后,点击回车键直接登陆的操作,就是这么一个平凡的操作,不知道大家有没有在实际工作中发现一些问题,下面我来跟大家讲讲我发现的问题,首先运行下面的代码:

<form method="get"><label>用户名:<input type="text" /></label><button onclick="console.log('取消') ;return false;">取消</button><button onclick="console.log('提交') ;return false;">提交</button>
</form>

当你在输入框中点击回车时,你会惊奇的发现控制台竟然打印出了 取消 ,别慌,我们把取消按钮隐藏掉 display:none:

<button style="display:none" onclick="console.log('取消') ;return false;">取消</button>

再次刷新界面,输入框中回车,你又会发现控制台依然打印出了 取消 , 是不是觉得很神奇,然后我们把 提交按钮取消按钮 调换一个位置:

<button onclick="console.log('提交') ;return false;">提交</button>
<button onclick="console.log('取消') ;return false;">取消</button>

这时候控制台打印出了 提交 ,到这里相信大家应该明白了一个事情,如果 在 from 中进行回车操作,表单在执行 submit 的操作同时,会响应后面第一个button 的点击事件 无论这个button是否是隐藏的都会被执行click事件,所以大家在通过回车键处理表单提交的时候,注意其中 button 的前后顺序。

当然了,有时候我们可能就需要取消按钮在前,提交按钮在后,这又该如何呢,别急,看下面代码:

<input type="button" onclick="console.log('取消') ;return false;" value="取消"/>
<input type="submit" onclick="console.log('提交') ;return false;" value="提交">

我们将 button 换成 input 然后分别设置不同的 type,这时候点击回车,你会发现控制台打印了 提交 ,看到不同了吧,使用input标签来定义按钮的时候,点击回车,会执行 type="submit" 的按钮,这样就不用去关心按钮的前后位置了。当然了你也可以手动执行 formsubmit方法,这个看个人喜欢。

谢谢!

这篇关于通过回车键提交form表单时需要注意的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/978550

相关文章

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Seata之分布式事务问题及解决方案

《Seata之分布式事务问题及解决方案》:本文主要介绍Seata之分布式事务问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Seata–分布式事务解决方案简介同类产品对比环境搭建1.微服务2.SQL3.seata-server4.微服务配置事务模式1

mysql关联查询速度慢的问题及解决

《mysql关联查询速度慢的问题及解决》:本文主要介绍mysql关联查询速度慢的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql关联查询速度慢1. 记录原因1.1 在一次线上的服务中1.2 最终发现2. 解决方案3. 具体操作总结mysql

一文教你解决Python不支持中文路径的问题

《一文教你解决Python不支持中文路径的问题》Python是一种广泛使用的高级编程语言,然而在处理包含中文字符的文件路径时,Python有时会表现出一些不友好的行为,下面小编就来为大家介绍一下具体的... 目录问题背景解决方案1. 设置正确的文件编码2. 使用pathlib模块3. 转换路径为Unicod

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》:本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口

Git如何修改已提交人的用户名和邮箱

《Git如何修改已提交人的用户名和邮箱》文章介绍了如何修改Git已提交人的用户名和邮箱,包括注意事项和具体步骤,确保操作正确无误... 目录git修改已提交人的用户名和邮箱前言第一步第二步总结git修改已提交人的用户名和邮箱前言需注意以下两点内容:需要在顶层目录下(php就是 .git 文件夹所在的目

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

基于.NET编写工具类解决JSON乱码问题

《基于.NET编写工具类解决JSON乱码问题》在开发过程中,我们经常会遇到JSON数据处理的问题,尤其是在数据传输和解析过程中,很容易出现编码错误导致的乱码问题,下面我们就来编写一个.NET工具类来解... 目录问题背景核心原理工具类实现使用示例总结在开发过程中,我们经常会遇到jsON数据处理的问题,尤其是

springboot3.4和mybatis plus的版本问题的解决

《springboot3.4和mybatisplus的版本问题的解决》本文主要介绍了springboot3.4和mybatisplus的版本问题的解决,主要由于SpringBoot3.4与MyBat... 报错1:spring-boot-starter/3.4.0/spring-boot-starter-