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 相关文章推荐
js图片延迟加载的实现方法及思路
Jul 22 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
js获取 type=radio 值的方法
May 09 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
深入理解js中的加载事件
Feb 08 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
APMServ使用说明
2006/10/23 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
PHP守护进程实例
2015/03/06 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
模具数控专业自荐信
2014/01/27 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书