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 相关文章推荐
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
xml转json的js代码
Aug 28 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
js+css3制作时钟特效
Oct 16 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
swiper自定义分页器的样式
Sep 14 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
discuz7 phpMysql操作类
2009/06/21 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
javascript 节点遍历函数
2010/03/28 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python 迭代器工具包【推荐】
2016/05/06 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript