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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
ES5新增数组的实现方法
May 12 Javascript
jquery实现上传图片功能
Jun 29 jQuery
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
javascript时间差插件分享
2016/07/18 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
C#的几个面试问题
2016/05/22 面试题
什么是封装
2013/03/26 面试题
上课迟到检讨书
2014/01/19 职场文书
仓管岗位职责范本
2014/02/08 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
导游欢迎词范文
2015/01/23 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
MySQL一些常用高级SQL语句
2021/07/03 MySQL
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js