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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
深入密码加salt原理的分析
2013/06/06 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js图片预加载示例
2014/04/30 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python如何重载模块实例解析
2018/01/25 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
会计职业生涯规划书
2014/01/13 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
党员剖析材料范文
2014/09/30 职场文书
委托公证书格式
2015/01/26 职场文书
校本培训个人总结
2015/02/28 职场文书
个人合作协议范本
2015/08/06 职场文书
法律服务所工作总结
2015/08/10 职场文书
导游词之西递宏村
2019/12/10 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
MySql数据库 查询时间序列间隔
2022/05/11 MySQL