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中的其他对象
Jan 16 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
原生js检测页面加载完毕的实例
Sep 11 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 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 快速生成 Flash 动画的方法
2007/03/06 PHP
php笔记之常用文件操作
2010/10/12 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python抽取指定url页面的title方法
2018/05/11 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
shell程序中如何注释
2012/02/17 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
火锅店创业计划书范文
2014/02/02 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
教师节祝酒词
2015/08/11 职场文书
新年寄语2016
2015/08/17 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
浅析python中特殊文件和特殊函数
2022/02/24 Python