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 编程引入命名空间的方法
Jun 29 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 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作的文本留言本的例子(二)
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
html向js方法传递参数具体实现
2013/08/08 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技