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 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
requireJS使用指南
Apr 27 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
vue实现扫码功能
Jan 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 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
利用python代码写的12306订票代码
2015/12/20 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
大学生励志演讲稿
2014/04/25 职场文书
2015年项目工作总结
2015/04/29 职场文书
公司表扬稿范文
2015/05/05 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python