cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kaedah JS untuk log masuk dengan menekan kemahiran Enter key_javascript

Kaedah JS untuk log masuk dengan menekan kemahiran Enter key_javascript

WBOY
WBOYasal
2016-05-16 16:38:431462semak imbas

Contoh dalam artikel ini menerangkan kaedah JS untuk menekan kekunci Enter untuk log masuk. Fungsi ini mempunyai julat nilai praktikal yang sangat luas. Kongsikan dengan semua orang untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Kaedah 1: 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Check Score</title>
<script language="JavaScript">
function keyLogin(){
 if (event.keyCode==13)  //回车键的键值为13
   document.getElementByIdx_x("input1").click(); //调用登录按钮的登录事件
}
</script>
</head>
<body onkeydown="keyLogin();">
<input id="input1" value="登录" type="button" onClick="alert('调用成功！')">
</body>
</html>

Kaedah 2: 

<script>
function KeyDown()
{
  if (event.keyCode == 13)
  {
    event.returnValue=false;
    event.cancel = true;
    Form1.btnsubmit.click();
  }
}
</script>

Penggunaan: 

<form name="Form1" method="">
用户名:<INPUT TYPE=text SIZE=20 maxlength = 8 onkeydown=KeyDown()>
密码:<INPUT TYPE=password SIZE=20 maxlength = 8 onkeydown=KeyDown()>
<input type="submit" name="btnsubmit" value="提交" />
</form>

Kaedah 3:

Mana-mana halaman laman web mempunyai antara muka log masuk Berkali-kali selepas memasukkan nama pengguna dan kata laluan, anda perlu menggunakan tetikus untuk mengklik butang atau pautan yang serupa dengan log masuk Hanya dengan cara ini anda boleh memasuki laman web dan melakukan apa yang anda suka buat
Kadang-kadang saya tertanya-tanya sama ada saya boleh menaip apa yang saya perlu masukkan dan hanya tekan Enter untuk melaksanakan fungsi log masuk Penyelesaiannya adalah seperti berikut:

kod halaman ss.html:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/text.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onkeydown="on_return();">
  <form name ="loginForm" method="post" action="fuck.html">        
   <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" size="18.5">
 </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()' >
 登陆</a></td>
    </tr>
   </table>
  </form>
</body>
</html>
<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>

Di siniNota: Dalam 6c04bd5ca3fcae76e30b72ad730ca86d kami menambah atribut onkeydown, supaya selepas kami memasukkan kandungan, kami boleh terus melaksanakan kaedah JS on_return() dengan menekan kekunci Kerana window.event .keyCode jika Jika ia adalah 13, ia bermakna kekunci Enter, jadi kita menilai sama ada kekunci yang kita tekan adalah kekunci Enter Jika ia, kita akan mencari atribut 'sub' Jika kita jumpa kaedah klik, itu sahaja .

Saya harap kaedah yang diterangkan dalam artikel ini akan membantu reka bentuk pengaturcaraan web semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery bertindak balas kepada peristiwa tetikus dan menyembunyikan serta memaparkan nilai lalai input_jqueryArtikel seterusnya：jQuery bertindak balas kepada peristiwa tetikus dan menyembunyikan serta memaparkan nilai lalai input_jquery

Artikel berkaitan

Lihat lagi