<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>
</form>
<script type="text/javascript">
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>

jQuery版   相比存在一点缺陷   要求不严格的话可以用

$(function () {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});

分析:
$('input:text:first').focus();
页面初始化时,焦点定位第一个文本框内

var $inp = $('input:text');  
取的type=文本框的元素集合

$inp.bind('keydown', function (e) {} 
给文本框集合绑定'keydown'事件

var key = e.which;       
取的当前按下的键值 比如Enter的键值=13

e.preventDefault();

JS实现表单输入Enter键转换焦点框的更多相关文章

  1. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  2. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  3. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  4. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  5. VUE:事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  7. Vue.js:表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  8. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  9. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

随机推荐

  1. HDU 2089 不要62(数位DP)

    不要62 Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了, ...

  2. Java中ArrayList源码分析

    一.简介 ArrayList是一个数组队列,相当于动态数组.每个ArrayList实例都有自己的容量,该容量至少和所存储数据的个数一样大小,在每次添加数据时,它会使用ensureCapacity()保 ...

  3. Java编写的C语言词法分析器

    Java编写的C语言词法分析器 这是java编写的C语言词法分析器,我也是参考很多代码,然后核心代码整理起来,放在QQ空间和博客上,目的是互相学习借鉴,希望可以得到高手改进.这个词法分析器实现的功能有 ...

  4. centOS 6.4 vsftpd 配置

    ###########配置流程########### 1 新建一个ftp用户,为了跟vsftp的虚拟用户对应 #useradd  -d /home/vftpuser   -s /sbin/nologi ...

  5. 用eclipse建立简单WebService客户端,使用WSDL,用于短信接口发送

    使用工具:eclipse 标准版,不用任何插件. 操作步骤: 建立java Project 命名为mess: 再在project上右键,选择other,选择web service文件类别,选择web ...

  6. 更新ACCESS数据库出现“字段太小而不能接受所要添加的数据的数量。试着插入或粘贴较少的数据。”的解决方法

    今天进行数据调试时出现“字段太小而不能接受所要添加的数据的数量.试着插入或粘贴较少的数据.”,跟踪发现是在更新数据库的数据时出现的. 打开数据库表格发现出错的数据字段类型被定义为“文本”,也就是数据最 ...

  7. TDirectory.IsEmpty判断指定目录是否为空

    使用函数: System.IOUtils.TDirectory.IsEmpty class function IsEmpty(const Path: string): Boolean; static; ...

  8. 简简单单制作鼠标静态动态 ani cur 小结 鼠标形状指针

    近日在网上看到一个视频录制软件里的鼠标样子的指针感觉蛮好的自己制作了一个,效果还不错,几乎跟那个鼠标形状一模一样啦.总结了下制作过程现分享如下:1.首先用ps建立一个30*30像素的空白图片 然后将自 ...

  9. QQ宠物吹泡泡游戏小助手 VC++6.0代码分析

    最近玩QQ宠物,他总是心情低落,让我很不爽,让他玩耍吧,还得自己点鼠标,所以想偷个懒,试试能不能编个程序让电脑帮我做这个事情. 要干这件事就得先找一个游戏开刀,刚开始我找的是弹力球游戏,不就是点鼠标么 ...

  10. C语言写解一元二次方程程序心得

    前言:在网上看到不少解一元二次方程的小程序,在使用时总得出一大堆小数,感觉很不爽,遂自己重新写了一遍. 首先,先回忆一下一元二次方程的求根公式: 分别读取二次项.一次项和常数项系数并且求出delta ...