Onclick事件+ Enter鍵

Question

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

<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>

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

更新：

同時我把代碼更改為：

<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>

但是現在無論按下什么鍵都會執行驗證，所以甚至無法輸入密碼...我仍然在這里遺漏了一些東西

Answer 1

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

Answer 2

將其附在文件上：

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 3

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

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

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>