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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 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简单的会话类代码
2011/08/08 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
javascript self对象使用详解
2016/10/18 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
js制作提示框插件
2020/12/24 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
pandas值替换方法
2018/07/10 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python五子棋游戏的设计与实现
2019/06/18 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
python绘制分布折线图的示例
2020/09/24 Python
python实现移动木板小游戏
2020/10/09 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
文明倡议书范文
2014/04/15 职场文书
听课评语大全
2014/04/30 职场文书
园林系毕业生求职信
2014/06/23 职场文书
端午节活动总结报告
2015/02/11 职场文书
公务员政审个人总结
2015/02/12 职场文书
天气温馨提示语
2015/07/14 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers