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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python创建学生成绩管理系统
2019/11/22 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
关于旷工的检讨书
2014/02/02 职场文书
欢送退休感言
2014/02/08 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
关爱留守儿童标语
2014/06/18 职场文书
机械机修工岗位职责
2014/08/03 职场文书
司考复习计划
2015/01/19 职场文书