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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
jquery replace方法去空格
2017/05/08 jQuery
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
JS实现轮播图效果
2020/01/11 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python新手如何理解循环加载模块
2020/05/29 Python
numpy实现RNN原理实现
2021/03/02 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
玩具公司的创业计划书
2013/12/31 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
英文产品推荐信
2015/03/27 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
Nginx配置使用详解
2022/07/07 Servers