window.onload = function () {
//阻止按回车按钮后提交表单的问题
document.getElementsByTagName("form")[0].onkeydown = function () {
if (event.keyCode == 13) { return false; }
};
var inputs = document.getElementsByTagName("input");
var index = 1;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text" && inputs[i].style.display != "none" && inputs[i].getAttribute("disabled") != "disabled") {
//给页面上的没有隐藏的文本框设置tabindex顺序值,下文按tabindex顺序跳转
inputs[i].setAttribute("tabindex", index);
//监听onkeydown事件,输入回车时实现跳至下一文本框
inputs[i].onkeydown = goNextInput;
index++;
}
}
}; function goNextInput() {
if (window.event.keyCode == 13) { //录入回车时才往下一录入框跳
//下一个录入框的tabindex值
var nextIndex = parseInt(window.event.srcElement.getAttribute("tabindex")) + 1;
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text" && inputs[i].style.display != "none") {
var tabIndex = inputs[i].getAttribute("tabindex");
if (tabIndex != null) {
var index = parseInt(tabIndex);
if (typeof index == "number" && !isNaN(index) && index == nextIndex) {
inputs[i].focus();
}
}
}
}
}
}

html页面实现回车跳转下一文本框的更多相关文章

  1. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  2. Silverlight中文本框添加回车事件后,换行无法清除的解决方法

    在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...

  3. ie下使用文本编辑器导致input文本框无法聚焦的问题原因

    最近公司的一个项目遇到一个如下问题: 描述:测试发现,每当我们在发布活动的页面发布完活动后,页面跳转到我的活动,然后再次回到发布活动页面,发现所有的input文本框都不能聚焦.然后再去看看其他页面(我 ...

  4. 如何去掉IE文本框后的那个X css代码

    在IE10以上版本中,页面上的文本框控件在输入文字时候会被自动加上一个X.但是IE这个自作聪明的功能有时候会让我们的页面爆掉,比如当文本框宽度过小,X显示不下时候会顶掉你的文本. 要隐藏这个X可以用I ...

  5. [转]让你的网页文本框增加光晕效果与提示,水印(类似QQ2011)

    本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html 让你的网页文本框增加光晕效果(类似QQ2011) 我们 ...

  6. tp5页面输出时,搜索后跳转下一页的处理

    tp5页面输出时,搜索功能在跳转下一页时,如果不做任何处理,会返回原有是第二页输出的数据.为了保证跳转下一页时输出的是搜索到的数据,做以下处理. (要根据自己的搜索字段进行适当修改) 页面js代码,给 ...

  7. 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  8. App单个页面的最佳文本框个数是多少个?

    [1].不同大小的手机屏幕,对应的App每页最佳文本框个数,是不同的. [1.1]如果是iPhone4的屏幕尺寸,分辨率为640x960px的时候, 文本框个数最大值为:2个文本框 [计算公式] 第 ...

  9. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  10. SAP四代增强实现:销售订单复制项目文本时不需要显示文本框和回车

    最近接收到一个业务需求,在SAP依据销售订单复制时,如果订单里面的项目有多个文本,系统就会显示复制的文本框处理,让用户选择是否复制,这个就让销售很不舒服,如果有几十个项目,每个项目有几个文本,那就就要 ...

随机推荐

  1. 3.2.0 版本预告!远程日志解决 Worker 故障获取不到日志的问题

    Apache DolphinScheduler 3.2.0 版本已经呼之欲出,8 月 中下旬,这个大版本就要和用户见面了.为了让大家提前了解到此版本更新的主要内容,我们已经制作了几期视频和内容做了大致 ...

  2. Maven经验分享(五)Maven拷贝资源

    上一章介绍使用ant拷贝资源,这里介绍maven拷贝资源,使用maven-resources-plugin插件. <plugin> <groupId>org.apache.ma ...

  3. 什么是AOP,以及在Springboot中自定义AOP

    AOP (Aspect Oriented Programming)一般译为面向切面编程 Aspect [ˈæspekt] n.方面;层面;(动词的)体那么AOP 面相切面编程具体是指什么,它和之前的O ...

  4. Elsa V3学习之脚本

    在前面的文章中,可以看到我们经常使用JS脚本来获取变量的值.在Elsa中是支持多种脚本的,最常用的基本是JS脚本和C#脚本. 本文来介绍以下这两个脚本使用. Javascript 在ELSA中的jav ...

  5. Ubuntu20.04安装CUDA和CUDNN

    CUDA是GPU深度学习的运行库,那么cuDNN就是训练加速工具,两者要相互配合使用,所以一般机器学习需要训练引擎(tensorflow-gpu) + CUDA + cuDNN使用.想不安装cuDNN ...

  6. C# 读取DBF文件到Datatable

    此种方式不依赖与任何驱动,第三方插件. 核心代码TDbfTable如下: using System; using System.Collections.Generic; using System.Te ...

  7. Docker高级:Redis集群实战!4主4从缩容到3主3从,怎么处理?

    在上一篇,我们学会了redis集群的扩容.从3主3从扩容到4主4从. 那么,接着,活动过去了.流量没有那么大了.需要缩容了.从4主4从缩容到3主3从了.那么这个时候又该怎么处理呢? PS本系列:< ...

  8. WPF性能优化之UI虚拟化

    @ 目录 前言 一.VirtualizingStackPanel 1.1 虚拟化功能介绍 1.在Window中添加一个ListBox控件. 2.在设计视图中用鼠标选中ListBox控件并右健依次单击& ...

  9. CSS – display, visibility, opacity, transparent 的区别

    前言 要让一个元素"消失", 有 3 种做法. 它们有一点点的不同. 在实战时要清楚什么时候用什么哦. 例子说明 <div class="abc"> ...

  10. ASP.NET Core Library – ImageSharp

    前言 2021 年就写过一篇了, Asp.net core 学习笔记 Image processing (ImageSharp), 只是那时还是旧的写法, 这篇作为翻新和以后继续增加新功能的介绍. I ...