各位大侠~~火狐谷歌怎么用JS实现按回车实现tab功能?
网上一般都是支持IE的
感谢啊~~
------解决方案--------------------
其实都keydown事件
只是ie用window.event.keyCode
ff用e.which
------解决方案--------------------
function SetKeyDown(form){var is=form.getElementsByTagName('input');for(var i=0;i<is.length;i++){if(is[i].type=='text'||is[i].type=='password'){if(window.event)is[i].onkeydown=function(){if(event.keyCode==13)event.keyCode=9;};else is[i].onkeydown=function(e){if(e.keyCode==13){e.preventDefault();for(var i=0;i<this.form.elements.length;i++)if(this==this.form.elements[i]){this.form.elements[i+1].focus();break;}}};}}}
SetKeyDown(document.forms[0]);
------解决方案--------------------
主要就是tabIndex的使用 按顺序获取焦点,不想获取焦点的设置为-1
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>回车切换焦点,兼容FF</title> <script type="text/javascript"> document.onkeydown=function(event){ var e=event||window.event; var keyCode=e.keyCode||e.which;//e.which 兼容FF var target=e.srcElement||e.target; if (keyCode ==13) { var tabindex=target.tabIndex+1; if( tabindex==6) tabindex=1; document.getElementById('elem'+tabindex).focus(); } } </script> </head> <body> <form> <input type="text" tabindex="1" id="elem1" /> <input type="text" value="readonly" readonly="readonly" tabindex="-1" /> <input type="button" value="click" tabindex="2" id="elem2" /> <input type="text" tabindex="3" id="elem3" /> <select tabindex="4" id="elem4" > <option value="1">select</option> <option value="2">select2</option> </select> <input type="button" value="submit" tabindex="5" id="elem5" /> </form> </body> </html>
------解决方案--------------------
- HTML code
<!doctype html> <html> <head> <title>Test</title> </head> <body> <form id="myform"> <input type="text" id="elem1" /> <input type="text" value="readonly" readonly="readonly" tabIndex="-1" /> <input type="button" value="click" id="elem2" /> <input type="text" id="elem3" /> <select id="elem4" > <option value="1">select</option> <option value="2">select2</option> </select> <input type="button" value="submit" id="elem5" /> </form> <script> var form = document.getElementById("myform"), elems = form.getElementsByTagName("*"), controls = []; for(var i = 0, len = elems.length; i < len; i++){ if(elems[i].tabIndex !== -1 && elems[i].nodeName !== "OPTION"){ controls.push(elems[i]); } } function indexOf(arr, value){ var ret = -1; for(var i = 0, len = arr.length; i < len; i++){ if(value === arr[i]){ ret = i; break; } } return ret; } form.onkeyup = function(event){ var e = event || window.event, target = e.target || e.srcElement; if(e.keyCode === 13){ var index = indexOf(controls, target), nextIndex = index + 1 < controls.length ? index + 1 : 0; console.log(controls[nextIndex]); controls[nextIndex].focus(); return false; } } </script> </body> </html>