上周末时，一起上英语口语的Molly同学让我帮忙用javascript实现两个功能。
1. js弹出对话框确认后，将光标定位到制定的元素上；
2. js实现将表单填写时的"Enter"键转化为"Tab"键使用。
尽管很久没看Web方面的html和javascript了，我还是挺有兴趣玩一下的。
对于第一个功能，通过document.getElementById("name").focus();这样可以来设置光标的焦点；确认对话框可以用confirm()函数来做。
还是直接看下简单的代码吧。
|
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 |
<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; } if( (name == "Molly") && (pin == "molly") ) { alert("Welcome, Molly."); document.getElementById("name").focus(); //this line can be used for focusing your cursor on wherever you want. return 0; } else { alert("name or password is wrong."); document.getElementById("pin").focus(); return 1; } } </script> <body> <p><b>This is for Molly.</b></p> <table width="80%"> <tr onkeydown=if(event.keyCode==13){event.keyCode=9}> name: <input type="text" value="Molly" id="name" size="12"> <br> </tr> <tr onkeydown=if(event.keyCode==13){event.keyCode=9}> password: <input type="password" size="12" id="pin"> <br> <tr> <tr> <input type="button" value="Submit" onclick="check()"> </br> </tr> <tr> "onkeydown=if(event.keyCode==13){event.keyCode=9}" in source code is for 'Enter' key function change" </tr> </table> </body> </html> |