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 创建对象和构造类实现代码
Jul 30 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
js实现网页定位导航功能
Mar 07 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python实现点云投影到平面显示
2020/01/18 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
会计专业自我鉴定
2014/02/10 职场文书
小学教师师德承诺书
2014/05/23 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年营业员工作总结
2014/11/18 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
北京天坛导游词
2015/02/12 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android