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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
原生js写的放大镜效果
Aug 22 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
JS数组方法reverse()用法实例分析
Jan 18 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP 事件机制(2)
2011/03/23 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
python实现数据写入excel表格
2018/03/25 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
会话Bean的种类
2013/11/07 面试题
生产班组长岗位职责
2014/01/05 职场文书
小学教师培训感言
2014/02/11 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
个人学习总结范文
2015/02/15 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android