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 相关文章推荐
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
Python中__call__用法实例
2014/08/29 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
英语专业学子个人的自我评价
2013/10/02 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
工程招投标邀请书
2014/01/26 职场文书
考察现实表现材料
2014/05/19 职场文书
公司股东出资证明书
2014/11/01 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript