基于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 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
利用d3.js实现蜂巢图表带动画效果
Sep 03 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自动给文章加关键词链接的函数代码
2012/11/29 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
制作特殊字的脚本
2006/06/26 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
Python实现的RSS阅读器实例
2015/07/25 Python
python3 flask实现文件上传功能
2020/03/20 Python
python tkinter控件布局项目实例
2019/11/04 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
行政人员工作职责
2013/12/05 职场文书
留学自荐信写作方法
2014/01/27 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
婚前协议书范本两则
2014/10/16 职场文书
签订劳动合同通知书
2015/04/16 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS