Onclick event + Enter key

Question

我在網站上有一個非常簡單的登錄腳本，它只使用一個簡單的密碼，而且它確實很好，我需要它。事情是，它只有在單擊「登錄」字時才起作用。我需要做的是在按Enter鍵時也能工作。 here's代碼：

<div style="background-image:url(images/IMG_Log_In_teste.jpg);width:1490px;height:243px;color:black;font-size:20px;" > 
     <br></br> 
     <a href="areaclienteOLD.html" onclick="javascript:return validatePass()"> 
     <div class="cities"> 
      <font color="white">        
       LOGIN 
      </font> 
     </div> 
     </a><br></br> 
     <input id='PASSWORD' type='PASSWORD' /> 
     <a href="areaclienteOLD.html" onclick="javascript:return validatePass()"></a><br></br> 
     <script> 
      function validatePass(){ 
      if(document.getElementById('PASSWORD').value == 'pkmass1725'){ 
      return true; 
       }else{ 
      alert('Password errada! Tente de novo.'); 
        return false; 
       } 
      } 
     </script>      
    </div> 

我已經嘗試添加的輸入類型和其他東西，但沒有使它工作:(

UPDATE：

同時，我改變了代碼如下：

<div style="background:blue;width:1490px;height:243px;color:black;font-size:20px;" > 
     <a href="areaclienteOLD.html" onclick="javascript:return validatePass()"> 
     <div class="cities"> 
      <font color="white">        
       LOGIN 
      </font> 
     </div> 
     </a> 
     <input id='PASSWORD' type='PASSWORD' onkeydown="javascript:return validatePass()"/> 
     <a href="areaclienteOLD.html" onclick="javascript:return validatePass()"></a> 
     <script> 
      function validatePass(){ 
      if(document.getElementById('PASSWORD').value == 'pkmass1725'){ 
      return true; 
       }else{ 
      alert('Password errada! Tente de novo.'); 
        return false; 
       } 
      } 
     </script> 

     <script> 
      document.body.onkeydown = function(e) { 
       if (e.keyCode == 13) 
       validatePass(); 
      }; 
     </script> 

    </div> 

但現在按什麼鍵也進行驗證，所以它甚至不能輸入密碼...... i'm人仍下落不明的東西在這裏

Answer 1

document.body.onkeydown = function(e) { 
    if (e.keyCode == 13) 
     validatePass(); 
}; 

Answer 2

JavaScript的替代方法是將type="submit"添加到HTML中。大多數瀏覽器默認使用Enter鍵綁定。

實施例： <button type="submit" onclick="validatePass()>LOGIN</button>

Answer 3

它附加到文檔：

document.addEventListener('keydown', function(e){ 
    if (document.getElementById('PASSWORD').value === '') return; 
    if (e.which === 13) validatePass(); 
    // e.which === 13 means enter key is pressed. 
}); 

它附加到<input id="PASSWORD">：

document.getElementById('PASSWORD').addEventListener('keydown', function(e){ 
    if (document.getElementById('PASSWORD').value === '') return; 
    if (e.which === 13) validatePass(); 
    // e.which === 13 means enter key is pressed. 
}); 

使用addEventListener是優選的方式，因爲它不覆蓋其他功能結合到onkeydown事件。

Answer 4

首先，讓我們使讀取輸入將調用您的登錄方法

function inputKeyUp(e) { 
e.which = e.which || e.keyCode; 
if (e.which == 13) { 
    validatePass(); 
} 

}

下一個密鑰的方法，讓我們稱之爲在正確位置，該方法在HTML

<input id='PASSWORD' type='PASSWORD' onkeyup="inputKeyUp(event)" /> 

而且應該這樣做！

Answer 5

onkeyup = fun1(e) 
in password textbox add this event 
in script 
fun1(e){ 
if (e.which == 13 || e.keyCode == 13){ 
     validatePass(); 
} 

Answer 6

對於一個完整的解決方案看下面（更改登錄鏈接到黑色，所以你可以看到它）：

function validatePass() { 
 
    if (document.getElementById("PASSWORD").value == 'pkmass1725') { 
 
    // do something if the password was correct 
 
    return true; 
 
    } else { 
 
    alert('Password errada! Tente de novo.'); 
 
    return false; 
 
    } 
 
} 
 

 
function validateOnEnter(event) { 
 
    var key = event.which || event.keyCode; 
 
    if (key == 13) { // enter pressed then invoke the validation method 
 
    validatePass(); 
 
    } 
 
}

<div style="background-image:url(images/IMG_Log_In_teste.jpg);width:1490px;height:243px;color:black;font-size:20px;"> 
 
    <br></br> 
 
    <a href="#" onclick="return validatePass()"> 
 
    <div class="cities"> 
 
     <font color="black">        
 
       LOGIN 
 
      </font> 
 
    </div> 
 
    </a> 
 
    <br></br> 
 
    <input id='PASSWORD' type='PASSWORD' onkeypress="validateOnEnter(event)" /> 
 
    <a href="#" onclick="return validatePass()"></a> 
 
    <br></br> 
 
</div>