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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
AngularJS快速入门
Apr 02 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
JS实现的找零张数最小问题示例
Nov 28 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
js实现拖动缓动效果
Jan 13 Javascript
JS中一些高效的魔法运算符总结
May 06 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中实现中文字符进制转换原理分析
2011/12/06 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
利用Python如何生成随机密码
2016/04/20 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
vscode调试django项目的方法
2020/08/06 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
终端业务员岗位职责
2013/11/27 职场文书
二手书店创业计划书
2014/01/16 职场文书
领导调研接待方案
2014/02/27 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2014年实习期工作总结
2014/11/27 职场文书
师德师风个人总结
2015/02/06 职场文书
大学感恩节活动总结
2015/05/05 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js