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复选框多选赋值给文本框的方法
Jan 27 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
Vue实现web分页组件详解
Nov 28 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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/01/17 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
js内置对象 学习笔记
2011/08/01 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python线程池如何使用
2020/05/28 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
企业总经理任命书
2014/06/05 职场文书
倡议书格式及范文
2015/04/29 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
React自定义hook的方法
2022/06/25 Javascript