基于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判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
JavaScript中return用法示例
Nov 29 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
js数组去重的方法总结
Jan 18 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python实现批量监控网站
2016/09/09 Python
windows下python安装小白入门教程
2018/09/18 Python
python绘制彩虹图
2019/12/16 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
双方协议书
2014/04/22 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript