表单切换,用回车键替换Tab健(不支持IE)

代码如下:

<div>
<form>
<input name="a" tab="1" />
<input name="a" tab="3" />
<input name="a" tab="2" />
<input name="a" tab="5" />
<input name="a" tab="4" />
<input type="submit" value="submit" />
</form>
</div>
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
inputs[i].onkeydown = function(e){
if (e.keyCode == 13) {
var input = getInputByTab(parseInt(this.getAttribute("tab")) + 1);
if (input) {
input.focus();
return false;
}
}
}
}
function getInputByTab(t) {
for (i =0; i < inputs.length; i++) {
if (inputs[i].getAttribute("tab") == t)
return inputs[i];
}
return false;
}
</script>

(0)

相关推荐

  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点). 键盘事件可以传

  • 不同浏览器对回车提交表单的处理办法

    条件是: 在IE和Firefox下 1.<form>属性的"action"字段必填: 2.有一个type="submit"的"input". 在Chrome和Safari下 满足第一条即可.(注释1) 所以,如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type="submit"的"input"后添加Javascript"onXXX(比如onClick)"事

  • 网页中表单按回车就自动提交的问题的解决方案

    1.当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交. 复制代码 代码如下: <form id="form1" action="post.php" method="post">       <input type="text" name="name" />   &

  • 没有form表单情况下敲回车键提交表单的js代码

    function enterPress(e) { if (e.keyCode == 13) { login(); } } function login(){ //登录验证等 alert('login'); } Username: Password: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 如何防止回车(enter)键提交表单

    如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了. 如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如<input id="q" name="q" type="text" onkeypress="javascript:return gosearch();&q

  • js禁止回车提交表单的示例代码

    如下所示; 复制代码 代码如下: function ifenter(){   if(event.keyCode==13){  return   false;  }else if(event.srcElement.type=="submit"){   form1.submit();   }  }   document.onkeydown=ifenter;

  • javascript 回车键触发表单提交的问题

    比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 如果表单里有一个type="submit"的按钮,回车键生效. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=bu

  • js 回车提交表单两种实现方法

    1.JavaScript 方法: 复制代码 代码如下: [javascript] <script> document.onkeydown=function(event){ e = event ? event :(window.event ? window.event : null); if(e.keyCode==13){ //执行的方法 alert('回车检测到了'); } } </script> <script> document.onkeydown=function

  • 表单切换,用回车键替换Tab健(不支持IE)

    复制代码 代码如下: <div> <form> <input name="a" tab="1" /> <input name="a" tab="3" /> <input name="a" tab="2" /> <input name="a" tab="5" /> <inp

  • js实现鼠标单击Tab表单切换效果

    本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text

  • Vue中的table表单切换实现效果

    目录 Vue表单切换实现效果 首先给两个链接定义 一个num Vue table切换组件 Vue表单切换实现效果 点击第一个链接 出现以下数据 点击第二个链接 ,我没有写后台所以没有数据, 可以自己写方法去获取数据复制给v-model 绑定的数组 首先给两个链接定义 一个num 点击第一个按钮时 设置num等于1 , 这样在table列表处定义 v-show ="num==1 ",当等于1 时 显示第一个table 当等于num 等于 2时 等于第二个table 这样就能实现 tabl

  • BootStrap智能表单实战系列(十一)级联下拉的支持

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

  • BootStrap 智能表单实战系列(十)自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e

  • 详解基于原生JS验证表单组件xy-form

    原生form表单 form 表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如 require . minlength . maxlength ,还有各种类型的 input ,比如 type=email 可以校验是否是邮箱类型,如果不满足还可以使用 pattern 进行正则校验. 原生的表单验证大概如下 虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用. 下面来看看 xy-form 下的效果

  • Bootstrap每天必学之表单

    本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 基本案例  单独的表单控件会被自动赋予一些全局样式.所有设置了.form-control的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;.将label和前面提到的这些

  • ASP.NET中实现把form表单元素转为实体对象或集合

    简介: 做WEBFROM开发的同学都知道后台接收参数非常麻烦 虽然MVC中可以将表单直接转为集实,但不支持表单转为 LIST<T>这种集合 单个对象的用法: 表单: 复制代码 代码如下: <input name='id'  value='1' > <input name='sex'  value='男' > 后台: 复制代码 代码如下: //以前写法             DLC_category d = new DLC_category();            

  • BootStrap智能表单实战系列(八)表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数量来自动使用不同的栅格, '1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项) 2.hides的配置项 hides:[{id:'xxx',value:''}] 此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值) 3.eles 表单元素的配置(

随机推荐