如何在用戶輸入時更改輸入的類別？

我試圖在用戶輸入密碼時確認輸入的顏色。如果匹配，則邊框變綠，否則變爲紅色。如何在用戶輸入時更改輸入的類別？

這裏是JQuery的：

var createPass = $("#createPass").val(); 
var confirmPass = $("#confirmPass").val(); 

$("#confirmPass").keydown(function() { 

    if(confirmPass == createPass && confirmPass != "") { 
     confirmPass.addClass("inputCorrect") 
    } else { 
     confirmPass.addClass("inputIncorect"); 
    } 
});

的HTML：

<label for="passWord">Create Password</label> 
<input type="password" id="createPass" name="passWord" class="inputBox" placeholder="Minimum 8 characters" required><br> 

<label>Confirm Password</label> 
<input type="password" id="confirmPass" class="inputBox" required>

而CSS：

input.passCorrect { 
    border: 1px solid #00cc00; 
} 

input.passIncorrect { 
    border: 1px solid #ff0000; 
}

我也試過以下JQuery的第一，但它似乎有點長的工作：

$("input[id=confirmPass").keyup(function() { 

    if ($("input[id=confirmPass]").val() == $("input[id=createPass]").val()) { 

     ($("input[id=confirmPass]").removeClass("passIncorrect")); 
     ($("input[id=confirmPass]").addClass("passCorrect")); 

    } 

    if ($("input[id=confirmPass]").val() != $("input[id=createPass]").val() && ($("input[id=confirmPass]") != "")) { 

     ($("input[id=confirmPass]").removeClass("passCorrect")); 
     ($("input[id=confirmPass]").addClass("passIncorrect")); 

    } 

});

我試過使用.keyup(),.keydown(),.keypress(),.change()，並且已經重新命名了幾乎所有的類，id和變量，但是我沒有成功！它在一個單獨的.js文件中，並且我試過它，但沒有$(document).ready()，它不起作用。我也嘗試使用.css()而不是.addClass和.removeClass。

任何幫助將不勝感激！

來源

2017-08-07 Alex Underhill

每次在第一個例子中按下某個鍵時，是否不應該得到「confirmPass」值，以獲取實際值？ –

嘗試與onInput事件 –

建議：1）你在「addClass」中拼寫錯誤「不正確」。 2）如果你想在這方面的幫助，我會建議創建一個JSFiddle或類似的。 –

這裏是固定的Javascript，這將使它的工作：

var createPass = $("#createPass"); 
var confirmPass = $("#confirmPass"); 

confirmPass.keydown(function() { 
    // Remove both classes 
    confirmPass.removeClass("passCorrect passIncorrect"); 

    // Add the appropriate class 
    if (confirmPass.val() == createPass.val() && confirmPass.val() != "") { 
     confirmPass.addClass("passCorrect"); 
    } else { 
     confirmPass.addClass("passIncorrect"); 
    } 
});

這裏有沒有事先工作的事：

當執行代碼confirmPass.addClass("inputCorrect")，你添加類爲一個整數值。
在您的JavaScript中，您添加了類'inputCorrect'和'inputIncorrect'，但在您的CSS中，您將類稱爲「passCorrect」和「passIncorrect」。
每次用戶按下某個鍵時，您都需要獲取createPass和confirmPass的值，否則您在開頭聲明的兩個變量將始終包含兩個輸入的初始值。
每次用戶按下某個鍵時，都需要刪除輸入的類，否則這兩個類將應用於輸入。

來源

2017-08-07 13:57:17

差不多。在添加「passCorrect」之前，您需要刪除類「passIncorrect」。實際上，爲每個循環移除類「passIncorrect」並在條件滿足時再次添加它是一個好主意。 – Gerard

謝謝你指出這一點！只是修復它:) –

謝謝亞瑟！這不是在我的網站上工作，但它正在做我想要的小提琴。我認爲這可能是其他問題，因爲沒有簡單的測試可以使用JavaScript或JQuery。我將不得不深入一點，但一旦修復完畢，我一定會使用這個片段。 –

如何在用戶輸入時更改輸入的類別？

回答

相關問題