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和火狐对键值获取的不同,所以对浏览器做了简单的判断区分。这样就可以在各个浏览器上获取敲击的键值。

最后,获取到当前的值以后,就可以加其它的各种条件了。

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
BootStrap selectpicker
Jun 20 Javascript
jQuery实现验证码功能
Mar 17 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 #Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 #Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 #Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 #Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 #Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 #Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 #Javascript
You might like
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python中的列表与元组的使用
2019/08/08 Python
python爬虫基础知识点整理
2020/06/02 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
警察思想汇报
2014/01/04 职场文书
妇产医师自荐信
2014/01/29 职场文书
中学清明节活动总结
2014/07/04 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
详解Python中的for循环
2022/04/30 Python