基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )


Posted in Javascript onNovember 14, 2010

第一种方法:

$(document).ready(function () { 
$(':input:text:first').focus(); 
$(':input:enabled').addClass('enterIndex'); 
// get only input tags with class data-entry 
textboxes = $('.enterIndex'); 
// now we check to see which browser is being used 
if ($.browser.mozilla) { 
$(textboxes).bind('keypress', CheckForEnter); 
} else { 
$(textboxes).bind('keydown', CheckForEnter); 
} 
}); 
function CheckForEnter(event) { 
if (event.keyCode == 13 && $(this).attr('type') != 'button' && $(this).attr('type') != 'submit' && $(this).attr('type') != 'textarea' && $(this).attr('type') != 'reset') { 
var i = $('.enterIndex').index($(this)); 
var n = $('.enterIndex').length; 
if (i < n - 1) { 
if ($(this).attr('type') != 'radio') 
{ 
NextDOM($('.enterIndex'),i); 
} 
else { 
var last_radio = $('.enterIndex').index($('.enterIndex[type=radio][name=' + $(this).attr('name') + ']:last')); 
NextDOM($('.enterIndex'),last_radio); 
} 
} 
return false; 
} 
} 
function NextDOM(myjQueryObjects,counter) { 
if (myjQueryObjects.eq(counter+1)[0].disabled) { 
NextDOM(myjQueryObjects, counter + 1); 
} 
else { 
myjQueryObjects.eq(counter + 1).trigger('focus'); 
} 
}

方法二(转载网络)
document.onkeydown = function(evt) { 
var isie = (document.all) ? true : false; 
var key; 
var srcobj; 
alert(isie); 
if (isie) { 
key = event.keyCode; 
srcobj = event.srcElement; 
} 
else { 
alert(evt); 
key = evt.which; 
srcobj = evt.target; 
} 
if (key == 13 && srcobj.type != 'button' && srcobj.type != 'submit' && srcobj.type != 'reset' && srcobj.type != 'textarea' && srcobj.type != '') { 
if (isie) { 
event.keyCode = 9; 
} 
else { 
var el = getNextElement(evt.target); 
if (el.type != 'hidden') 
el.focus(); 
else 
while (el.type == 'hidden') 
el = getNextElement(el); 
el.focus(); 
return false; 
} 
} 
} 
document.onkeyup = function(evt) { 
var isie = (document.all) ? true : false; 
var key; 
var srcobj; 
alert(isie); 
if (isie) { 
key = event.keyCode; 
srcobj = event.srcElement; 
} 
else { 
alert(evt); 
key = evt.which; 
srcobj = evt.target; 
} 
if (key == 13 && srcobj.type != 'button' && srcobj.type != 'submit' && srcobj.type != 'reset' && srcobj.type != 'textarea' && srcobj.type != '') { 
if (isie) { 
event.keyCode = 9; 
} 
else { 
var el = getNextElement(evt.target); 
if (el.type != 'hidden') 
el.focus(); 
else 
while (el.type == 'hidden') 
el = getNextElement(el); 
el.focus(); 
return false; 
} 
} 
} 
function getNextElement(field) { 
var form = field.form; 
for (var e = 0; e < form.elements.length; e++) { 
if (field == form.elements[e]) 
break; 
} 
return form.elements[++e % form.elements.length]; 
} function document.onkeydown() { 
var e = event.srcElement; 
if (event.keyCode == 13 && e.tagName == "INPUT" && e.type == "text") 
event.keyCode = 9; 
}
Javascript 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS面向对象编程详解
Mar 06 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 #Javascript
jQueryUI如何自定义组件实现代码
Nov 14 #Javascript
Jquery常用技巧收集整理篇
Nov 14 #Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 #Javascript
有关DOM元素与事件的3个谜题
Nov 11 #Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 #Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 #Javascript
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP用户指南-cookies部分
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
脚本合并提升javascript性能示例
2014/02/24 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
详解python基础之while循环及if判断
2017/08/24 Python
django实现用户登陆功能详解
2017/12/11 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
一些Solaris面试题
2015/12/22 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
物流经理自我评价
2013/09/23 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
环保倡议书范文
2014/05/12 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书