Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法


Posted in Javascript onSeptember 01, 2014

做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息。

第一想法就是,网上去copy一段代码直接用。但了百度、谷歌找了个遍,找到的代码80%以上都是一样的。有的代码太老,都不能用。有的只有部分浏览器能用。折腾了半小时也没个合适的办法。最后一想,干脆自己动手。

一、思路

每次点击回车的时候,获取当前的焦点位置,然后设置它的下一个元素获取焦点;

二、代码

<script type="text/javascript">
 $('input:text:first').focus(); 
 document.onkeydown = function enterHandler(event)
 {
   var inputs = $("input");           //可自行添加其它过滤条件   
   var browser = navigator.appName ;      //浏览器名称
   var userAgent = navigator.userAgent;     //取得浏览器的userAgent字符串 
   
   var Code = '' ;
   if(browser.indexOf('Internet')>-1)      // IE  
    Code = window.event.keyCode ;
   else if(userAgent.indexOf("Firefox")>-1)   // 火狐
    Code = event.which;
   else                     // 其它
     Code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  
   if (Code == 13)               //可以自行加其它过滤条件
   {
     for(var i=0;i<inputs.length;i++)
     {
      if(inputs[i].id == document.activeElement.id)
      {  
        i = i== (inputs.length - 1) ? -1 : i ;
        $('#'+ inputs[i+1].id ).focus()
        break;
      }
     }
   }
 }

</script>

 其中,因为IE和火狐对键值获取的不同,所以对浏览器做了简单的判断区分。这样就可以在各个浏览器上获取敲击的键值。

最后,获取到当前的值以后,就可以加其它的各种条件了。

演示地址:http://demo.3water.com/js/2014/jsenterqiehuan/

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 #Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 #Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 #Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 #Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 #Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 #Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 #Javascript
You might like
PHP中GET变量的使用
2006/10/09 PHP
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python 内置模块详解
2019/01/01 Python
Python2与Python3的区别实例分析
2019/04/11 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
如何通过python实现全排列
2020/02/11 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
最新自我评价范文
2013/11/16 职场文书
高中历史教学反思
2014/02/08 职场文书
怎么写自荐书范文
2014/02/12 职场文书
幼儿园课题方案
2014/06/09 职场文书
党课心得体会范文
2014/09/09 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Python 如何实现文件自动去重
2021/06/02 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP