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
Nov 25 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
canvas绘制多边形
Feb 24 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 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简单隔行变色功能实现代码
2016/07/09 PHP
js 数组操作代码集锦
2009/04/28 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
javascript 函数使用说明
2010/04/07 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
jquery replace方法去空格
2017/05/08 jQuery
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python实现两个文件合并功能
2018/04/01 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python pip使用超时问题解决方案
2020/08/03 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2019消防宣传标语!
2019/07/10 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
详解Golang如何优雅的终止一个服务
2022/03/21 Golang