<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. 09.13随笔2014年9月13日22:32:38,奶爸的英语教室,groovy

    我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语到 奶爸的英语教室  ...

  2. bzoj1068:[SCOI2007]压缩

    思路:区间dp,设状态f[l][r][bo]表示区间[l,r]的答案,bo=1表示该区间可以放M也可以不放M,bo=0表示该区间不能放M,并且对于任意一个状态f,l和l-1之间均有一个M,于是就可以进 ...

  3. c++ primer复习(二)

    1 悬垂else来自于else语句搭配的if语句的二义性 2 理解switch代码: switch(c) { case 'a': a++; case 'b': b++; default: x++; } ...

  4. Spark-Cassandra-Connector 插入数据函数saveToCassandra

    在spark-shell中将数据保存到cassandra: var data = normalfill.map(line => line.split("\u0005")) d ...

  5. mysql query insert中文乱码

    mysql新建的表的charset都是utf8的. 在phpmyadmin里直接敲sql,中文可以insert进去的,但是在php代码里mysql_query同样的sql语句就是不行,保存到表里是乱码 ...

  6. 【收集整理】Linux下的目录讲解

    Linux下的目录介绍:在Linux系统中,一切东西都是存放在一个唯一的“虚拟文件系统”中的,这个“虚拟文件系统”是树状的结构以一个根目录开始.以文件来表示所有逻辑实体和非逻辑实体,逻辑实体指文件和目 ...

  7. 系统监控的一些工具w , vmstat

    w 命令:--w 查看的是系统整体上的负载 # w 15:23:46 up 3:34, 2 users, load average: 0.03, 0.05, 0.00 USER TTY FROM LO ...

  8. eval(phpcode) 字符当代码执行

    eval(phpcode)eval() 函数把字符串按照 PHP 代码来计算.相当于在字符串两边分别加上PHP语 法标签 该字符串必须是合法的 PHP 代码,且必须以分号结尾. 如果没有在代码字符串中 ...

  9. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  10. ubuntu导出文件

    ye@aliyun:python$ ./deploy.sh backup static-rw-r--r-- 1 ye ye 174K 2014-03-22 10:36 ./backup/fbz_sta ...