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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
openlayers4.6.5实现距离量测和面积量测
Sep 25 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
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript multibox 全选
2009/03/22 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
《Python学习手册》学习总结
2018/01/17 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python内存读写操作示例
2018/07/18 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python3多线程知识点总结
2019/09/26 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
opencv python图像梯度实例详解
2020/02/04 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
软件测试工程师结构化面试题库
2016/11/23 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
不同意离婚上诉状
2015/05/23 职场文书
小学班级标语口号大全
2015/12/26 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫