在页面中采用回车控制光标跳转及提交示例

别再手动切换输入框了!3种JavaScript方法实现回车自动跳转(附完整代码) 本文详细介绍了三种利用JavaScript实现表单输入框回车键自动跳转的完整方案,涵盖原生JavaScript、jQuery及React框架。通过精准的事件捕获与焦点控制,有效阻止默认提交行为,提升长表单填写的流畅度与效率,告别手动切换输入框的繁琐操作。 阅读详情

采用登陆的方式来展现,在输入用户名的时候,按下回车跳到输入密码框,在输入密码的框中按下回车,就直接提交,但此时需要注意一点就是:提交的按钮不能够为submit型,只能够为普通的按钮,否则检测在有按回车的时候就会产生提交的动作。

示例文件如下:

 

< html >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 回车跳转及提交示例 </ title >
</ head >

< body >
< form  action =""  method ="post"  name ="loginForm" >

/********************在页面中采用回车控制光标跳转及提交示例********************/
< br >
用户名:
< input  type =text  name ="username"  onKeyPress ="toPassword(event);" >< br >
密码
&nbsp;&nbsp; : < input  type =password  name ="password"  onKeyPress ="doSubmit(event);" >< br >
< input  type =button  value ="提交(注:此时的提交按钮不能够是submit型的)"  onclick ="doSubmit(event);" >
</ form >
</ body >
</ html >
< Script  language ="JavaScript" > ...

function toPassword(e)
...{
    
var frm = document.loginForm;
    
if(13 == e.keyCode)    ...{
        
if(frm.elements["username"].value =="")...{
            alert(
"请输入用户名");
            frm.username.focus();
            
return;
        }

        frm.elements[
"password"].focus();
    }

}

function doSubmit(e)
...{
    
if(e.keyCode==13)
    
...{
        alert(
"doSubmit");
    }

    
else
    
...{
        
//alert("not submit")
    }

}

</ script >

 

本文出自:冯立彬的博客



别再手动切换输入框了!3种JavaScript方法实现回车自动跳转(附常见坑点) 本文详细介绍了三种使用JavaScript实现表单输入框回车键自动跳转的实用方法,涵盖原生JS、jQuery及现代事件委托方案。文章重点解析了键盘事件监听、焦点管理及如何优雅处理表单默认提交、动态内容等常见开发坑点,旨在提升表单填写效率与用户体验。 阅读详情

相关推荐

避坑指南:当二维码开头出现回车符时,你的扫码器为什么会误触发业务逻辑?

本文深入探讨了二维码扫描器中回车符(0D0A)引发的业务逻辑异常问题,解析了HID键盘模拟模式下的数据传输机制。通过真实案例和HEX数据流分析,提供了从设备固件升级到软件数据预处理的全套解决方案,帮助开发者有效规避扫码器误触发风险。

weixin_29237635的博客 194

vue中光标自动显示到指定的input框内

给input 标签内加 ref="inputName " 然后在想要执行的地方写 this.$refs.inputName.focus() 举例: 我是在想要打开这个页面的时候把光标显示到input框内所以加在mounted中 如果想在执行事件之后让光标显示到input框内就加在事件中 ...

Ninewu的博客 5953

ArkTs中textinput输入特定值,跳转目标页面

大家有什么问题,都可以通过公众号“大前端之旅”,与我取得联系。一起学习OpenHarmony/HarmonyOS应用开发。

坚果的博客 8965

vue通过点击事件实现页面跳转

前言 页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,但是如果我们想通过点击别的标签实现页面跳转,怎么办呢?这个时候我们就要用到this.$router.push()方法,下面来给大家简单介绍一下使用! this.$router.push() 1.首先我们要定义一个点击事件 2.在定义事件中调用this.$router.push()方法 <button @click = "handle">点击跳转</button> <scrip

David_house的博客 5万+

enter键控制input光标移动到下一个框

enter键控制input光标移动,通过判断是否是最后一个input输入框来决定是继续向下跳还是跳到第一个input输入框

vue实现输入框自动跳转功能

本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下 <template> <div class=inputClass> <div v-for=(item,index) key=index> <input v-model=item.value type=password class=inputBorder @keyup=jumpNext($event,index,item.value) @keydown=replaceValue(index)> </div> </div> </tem

vue笔记 keyboard+隐藏input光标+自动跳转到下一个input

#声明 部分代码抄袭自使用vue实现简单键盘,支持移动端和pc端   #实现效果 #项目代码地址 码云地址 #vue-keyboard 项目代码地址  使用vue实现简单键盘,支持移动端和pc端...

Lengff 1776

RISC-V— 架构基础知识学习

蜂鸟 E200 系列是一个开源的RISC-V 处理器。蜂鸟 E200 系列由中国大陆研发团队开发,用户能够轻松与开发人员取得交流和支持。RI蜂鸟 E200 处理器研发团队拥有在国际一流公司多年开发处理器的经验,使用稳健的Verilog 2001 语法编写的可综合 RTL 代码,以工业级标准进行开发。蜂鸟 E200 的代码为人工编写,添加丰富的注释且可读性强,非常易于理解。

deilt 1万+

html页面中文本框的光标控制

本文将介绍几项html页面设计实用技术:1、打开HTML页面时光标自动定位在某个文本框中;2、多个文本框之间的跳转一般需要点击鼠标或者按tab键,如何用回车键来代替;3、如何清空文本框中的内容。...............

cnds123的专栏 4563

基于STM32的超声波流量计设计

本项目基于STM32微控制器设计了一种超声波流量计,采用时间差法测量液体或气体的流速,计算流量并通过显示屏实时显示,同时支持远程数据传输。本设计通过STM32微控制器实现了基于时间差法的超声波流量计,集成了超声波信号采集、流量计算、状态显示和远程通信功能。本系统需要实现超声波信号的实时采集与处理,计算流速和流量,并将数据通过OLED显示和无线模块上传。系统需具备高精度的时间测量能力和良好的抗干扰能力。通过计算超声波在顺流和逆流方向上的传播时间差,结合管道直径与流体特性,计算流速并进一步计算流量。

stm32d1219的博客 2351

基于STM32F334C8T6的四开关Buck-Boost双向DC-DC电源设计与实现(附源码、仿真与计算书)

本文详细介绍了基于STM32F334C8T6的四开关Buck-Boost双向DC-DC电源设计方案。该设计利用STM32的高分辨率定时器(HRTIM)实现精确PWM控制,支持Buck、Boost和Buck-Boost三种工作模式自动切换,具备双向能量流动能力。通过PSIM仿真和Mathcad计算书进行参数优化,实测效率达95.8%,适用于新能源系统和电池管理等场景。

www00的博客 528

如何实现文本框焦点自动跳转及通过回车键提交表单

1. <!-- Sub document_onkeydown if window.event.keyCode=13 then window.event.keyCode=9 end if End Sub //--> 当点击回车的时候去执行 Tab键 2. 对于

MVPlover的专栏 802

SAP ABAP OData 的四种开发方式

摘要:SAP开发中CDS视图转OData服务的四种方案演进:1)7.40+版本需手动映射数据源;2)7.50+可直接引用CDS视图自动生成服务;3)7.50+通过@OData.publish注解声明式发布;4)7.54+采用服务定义与绑定实现协议解耦。新版本推荐使用最新方案,旧系统可选传统方式,整体呈现开发简化、架构解耦的技术演进趋势。(150字)

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 867

asp.net中的回车事件

今天突然发现登陆的时候网站的跳转不是我想要的,后来自己写了一个方法,但是还是不太正确,在网上搜索了一下,一下是一些方法 ASP.NET回车提交事件是什么呢?是如何实现的呢?ASP.NET回车提交事件的执行需要注意什么细节呢?那么本文就向你介绍详细的内容,希望对你有所帮助。

liyifei21的专栏 1545

高通开发系列 - System之FOTA/DFOTA包制作和升级

高通开发系列 - System之FOTA/DFOTA包制作和升级

fulinux的博客 4226

Vivado报错-4 [Routed 35-3424] SLL Assignment failed ILP VU19P

Vivado报错[Routed 35-3424] SLL Assignment failed ILP VU19P

weixin_39896700的博客 1409

优化表单填写体验:HTML input回车自动跳转的进阶实现

本文详细解析了如何通过JavaScript优化网页表单填写体验,实现HTML input回车自动跳转的进阶功能。文章从监听onkeydown事件入手,逐步讲解了如何精准定位下一个输入框、处理边界情况、设置光标位置,并提供了兼容多种输入类型和前端框架的健壮解决方案,旨在提升数据录入效率与用户体验。

gpt4scribbler的博客 191

毕设-MobileNetV4:给YOLOv8装上轻量化“引擎”——通用瓶颈与C2f融合的实战教程

本文介绍了一种将MobileNetV4与YOLOv8结合的目标检测模型轻量化方案。MobileNetV4通过通用瓶颈(UB)结构实现多任务适配,其核心改进包括动态卷积核、注意力机制和多路径特征聚合,显著提升特征提取能力。作者详细阐述了如何在YOLOv8框架中实现MobileNetV4的通用瓶颈模块,包括"膨胀-卷积-注意力-压缩"的流程设计,并构建完整的backbone网络。该方案通过融合MobileNetV4的轻量化优势与YOLOv8的高效检测架构,在移动设备上实现了精度与速度的良好平

FJN110的博客 505

javascript使回车键替代tab键的光标移动功能

在要改变的页面中加入如下代码 &lt;script type="text/javascript"&gt; document.onkeydown=function enterToTab() { if(event.srcElement.type != 'submit' &amp;&amp; event.srcElement.type!="image" &amp;&amp; event.sr...

天蓝色路 193

Nacos 从困惑到蒙圈(9)Nacos 适配 达梦数据库【最新版】

介绍Nacos适配达梦数据库的详细步骤,包括对最新版本的支持改造。

甘蓝的专栏 1380

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

JS实现键盘移动光标

通过键盘的上下左右,实现对光标的移动,当点击回车时,进入所选的对应页面。左边是菜单栏,右边是具体数据。思路:1、先查找到所需样式的

落雨敏 3192

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

uni-app:实现文本框的自动换行

uni-app:实现文本框的自动换行

weixin_46001736的博客 883

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用(具体实现+踩坑篇)

【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用(具体实现+踩坑篇)

花椒和蕊的博客 2845

html页面自动输入数字,js input框输入1位数字后自动跳到下一个input框聚焦

// input框输入1位数字后自动跳到下一个input聚焦function goNextInput(el){var txts = document.querySelectorAll(el);for(var i = 0; ivar t = txts[i];t.index = i;t.setAttribute("readonly", true);t.onkeyup=function(){this.v...

weixin_42501298的博客 1925
上一篇: 采用JAVASCRIPT实现全选的三种情况
下一篇: 1st javascript editor 3.8智能提示的开启
冯立彬
冯立彬 优质创作者: 编程框架技术领域 优质创作者: 编程框架技术领域
博客等级 码龄21年 5458粉丝 593原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值