基于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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
layui使用label标签的方法
Sep 14 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
在次封装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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
简单租房协议书
2014/04/09 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
毕业设计工作总结
2015/08/14 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS