基于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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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
PHP APP微信提现接口代码
2018/09/30 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python集合是否可变总结
2019/06/20 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
秋游活动策划方案
2014/02/16 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
喝酒检查书范文
2014/02/23 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
集中采购方案
2014/06/10 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2014年幼师工作总结
2014/11/22 职场文书
对公司的意见和建议
2015/06/04 职场文书
大学体育课感想
2015/08/10 职场文书
自荐信大全
2019/03/21 职场文书