接着前面的说，对于第二个功能（javascript来实现Enter键变为Tab键的功能）。
其核心是对onkeydown这个事件进行更改。
1. 对于IE浏览器其实很简单，下面一句话即可搞定，在需要的地方使用即可。（对非IE浏览器不适用）
|
1 |
onkeydown=if(event.keyCode==13){event.keyCode=9} |
2. 要支持非IE的Firefox、Chrome等浏览器，就需要写得稍微复杂一点
3. 对于一些hidden属性的，以及button/submit这种type的元素，是不要去将Enter转化为Tab的功能的（应该保持Enter键的原本功能）。
另外，在写的过程中，还涉及到了对对象非空判断，也做个笔记吧
Javascript脚本中判断对象为空，主要有如下三种方法：
1、 if (typeOf(x) == "undefined")
2、 if (typeOf(x) != "object")
3、 if(!x)
个人更喜欢第三那种if(!x)，这个简单明了，不过请不要用if(x)来写对x非空的判断。
然后，JS中的空语句直接用一个分号表示(;)即可，在下面的实例代码中也用到了。
JS实现Enter键变为Tab键功能的简单代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script lang="javascript"> function check() { var name = document.getElementById("name").value; var pin = document.getElementById("pin").value; if (!confirm("Do you confirm?")) { document.getElementById("name").focus(); window.event.returnValue = false; return 0; } if( (name == "Molly") && (pin == "molly") ) { alert("Welcome, Molly."); document.getElementById("name").focus(); return 0; } else { alert("name or password is wrong."); document.getElementById("pin").focus(); //this line can be used for focusing your cursor on wherever you want. return 1; } } // rewrite the 'onkeydown' event to make sure 'Enter' key can be used as 'Tab' in some needed circumstances. It work fine on both IE and non-IE browsers. document.onkeydown=function(evt) { var isie = (document.all) ? true : false; var key; var srcobj; // if the agent is an IE browser, it's easy to do this. if (isie) { key = event.keyCode; srcobj=event.srcElement; } else { key = evt.which; srcobj=evt.target; } if(key==13 && srcobj.type!='button' && srcobj.type!='submit' &&srcobj.type!='reset' && srcobj.type!='textarea' && srcobj.type!='') { if(isie) event.keyCode=9; else { var el=getNextElement(evt.target); if (el.type!='hidden') ; //nothing to do here. else while(el.type=='hidden') el=getNextElement(el); if(!el) return false; else el.focus(); } } } function getNextElement(field) { var form = field.form; for(var e = 0; e < form.elements.length; e++) { if (field == form.elements[e]) break; } return form.elements[++e % form.elements.length]; } </script> <body> <p><b>This is for Molly.</b></p> <form> <table width="20%"> <input type="hidden" value="name or password is wrong." id="warning" size="100"> <tr> name: <input type="text" value="Molly" id="name" size="12"> <br> </tr> <tr> password: <input type="password" size="12" id="pin"> <br> <tr> <tr align="right"> <input type="button" value="Submit" onclick="check()"> </tr> <table> <form> </body> </html> </html> |