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的跨域调用文件
Nov 19 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
原生JS运动实现轮播图
Jan 02 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
统计员岗位职责
2013/11/14 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
社团招新策划书
2014/02/04 职场文书
意向书范文
2014/03/31 职场文书
计划生育宣传标语
2014/06/21 职场文书
公司借条范本
2015/05/25 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
房产遗嘱范本
2015/08/06 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
经销商会议开幕词
2016/03/04 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python