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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
JS实现瀑布流布局
Oct 21 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
js实现div色块碰撞
Jan 16 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/09/22 PHP
php密码生成类实例
2014/09/24 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
理解AngularJs指令
2015/12/10 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
小程序实现录音功能
2020/09/22 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python 19个值得学习的编程技巧
2020/08/15 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
css3中transition属性详解
2014/09/02 HTML / CSS
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
奥巴马演讲稿
2014/01/08 职场文书
个人工作年终总结
2015/03/09 职场文书
导师鉴定意见
2015/06/05 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
Elasticsearch 聚合查询和排序
2022/04/19 Python