基于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 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
JS函数式编程实现XDM一
Jun 16 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
香妃
2021/03/03 冲泡冲煮
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python入门之后再看点什么好?
2018/03/05 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2015年资料员工作总结
2015/04/25 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android