js 捕捉回車鍵觸發登入，並驗證輸入內容
阿新 • • 發佈：2018-11-04
js 捕捉回車鍵觸發登入，並驗證輸入內容
有時候我們會遇到 web 頁面中捕捉按鍵，觸發一些效果，
比如常見的回車鍵觸發登入，並驗證輸入內容，下面會介紹，截圖：
一、最簡單的捕捉回車鍵：判斷按下的是不是回車鍵，jsEnter.html:
提示：回車鍵的鍵值為 13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script language='javascript'> document.onkeydown=function(){ //回車鍵的鍵值為 13 if (event.keyCode == 13){ alert('按下的是回車鍵！'); } else{ alert('您按的不是回車鍵！'); } } </script> </head> <body> <h3>您按回車鍵試一下？</h3> </body> </html>
二、按下回車鍵，實現登入操作，jsEnterLogin
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link rel="stylesheet" href="css/text.css" type="text/css"> <script language="javascript"> function check() { var formname=document.loginForm; if (formname.userName.value == "") { alert("請輸入使用者名稱！"); formname.userName.focus(); return false; } if (formname.pwd.value == "") { alert("請輸入密碼！"); formname.pwd.focus(); return false; } formname.submit(); } //回車時，預設是登陸 function on_return(){ if(window.event.keyCode == 13){ if (document.all('sub')!=null){ document.all('sub').click(); } } } </script> </head> <body onkeydown="on_return();"> <form name ="loginForm" method="post" action="#"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="69%" height="30"><span class="font_04">帳戶名</span> <input type="text" name="userName"> </td> </tr> <tr> <td width="69%" height="30"><span class="font_04">密 碼</span> <input type="password" name="pwd" > </td> </tr> <tr> <td width="31%" height="30"> <a id="sub" onClick='check()' style="color: brown"> 登陸</a></td> </tr> </table> </form> </body> </html>