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 中几个类选择器的简单使用介绍
Mar 14 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
Vue分页器实现原理详解
Jun 28 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python编写打字训练小程序
2019/09/26 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
模范家庭事迹材料
2014/02/10 职场文书
论文指导教师评语
2014/04/28 职场文书
体现团队精神的口号
2014/06/06 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
家长会欢迎词
2015/01/23 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
刑事法律意见书
2015/06/04 职场文书