基于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函数的引用, 关于内存的开销
Sep 17 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
jQuery构造函数init参数分析
May 13 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
详解Angular路由之路由守卫
May 10 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
在次封装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
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python Queue模块详解
2014/11/30 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python流程控制常用工具详解
2020/02/24 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
个人求职信范文
2014/05/24 职场文书
计算机软件专业求职信
2014/06/10 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android