Enter回车切换输入焦点方法兼容各大浏览器

做项目时,客户要求能够用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和火狐对键值获取的不同,所以对浏览器做了简单的判断区分。这样就可以在各个浏览器上获取敲击的键值。

最后,获取到当前的值以后,就可以加其它的各种条件了。

时间: 2024-11-07 05:06:50

Enter回车切换输入焦点方法兼容各大浏览器的相关文章

Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

<script type="text/javascript"> $('input:text:first').focus(); document.onkeydown = function enterHandler(event) { var inputs = $("input"); //可自行添加其它过滤条件 var browser = navigator.appName ; //浏览器名称 var userAgent = navigator.userAge

自动切换输入焦点的一个小&quot;插件&quot;

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> form{ margin-bottom:10px; } form#inputs>input,form#inputs2>input,form#inputs3>input{ width:40px; height:40px; border-right-co

【js】js访问剪切板(兼容各大浏览器)唯一解决方案ZeroClipboard.swf

需求描述: 通过JS实现将页面中的某个元素的数据复制到剪切板上. 需求分析: 要用JS实现最大的问题就是浏览器的兼容性问题了.而且最大的问题还是浏览器出于安全型的考虑,所以像chrome,Firefox等浏览器都不让访问. 解决方案: 最终的解决方案还是通过flash实现的,在网上搜索(关键字:js access clipboard)了一大堆的相关资料,但是这或许是唯一的解决方案了吧!真没想到,flash还是最终的解决方法.当有一天flash彻底被浏览器给抛弃了我想这又将是一大问题了.但是这个问

☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Placeholder兼容各大浏览器的例子</title> <script src="jquery-1.8.0.min.js"></script> </head> <body> <form> <div> &

JS中完美兼容各大浏览器的scrolltop方法

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; window.pageYOffset (Safari) 被放置在 || 的中间位置. 因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值.即或运算中 0 == undefine ; 当页面滚动条刚好在最顶端,即scrollTop值为 0 时,IE 下 window.pag

文本框的onchange事件,如何兼容各大浏览器

在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非正常字符时 ctrl+v ctrl+x ctrl+z delete Backspace 等操作时: 3.用户通过鼠标进行粘贴.剪切.撤消等操作时: <body> <input id="text1" type="text"/> <div id

兼容各大浏览器 onscrool

为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop:即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器! <!DOCTYPE html PUBLIC "-/

js的window.onscroll事件兼容各大浏览器

为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop:即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器! <!DOCTYPE html PUBLIC "-/

js原生代码编写一个鼠标在页面移动坐标的检测功能,兼容各大浏览器

function mousePosition(e) {     //IE9以上的浏览器获取     if (e.pageX || e.pageY) {         return {             x: e.pageX,             y: e.pageY         };     }     //IE9以下     //IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和docu