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中ajax学习笔记一
Oct 16 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
面试常见的js算法题
Mar 23 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
JS实现拼图游戏
Jan 29 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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/04/23 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
JS跨域问题详解
2014/11/25 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python判断字符串是否纯数字的方法
2014/11/19 Python
python自动翻译实现方法
2016/05/28 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
如何处理简单的PHP错误
2015/10/14 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
银行办理业务介绍信
2014/01/18 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
协议书与合同的区别
2014/04/18 职场文书
求职简历自荐信
2014/06/18 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android