Question

我正在尝试创建一个登录表单，它将检查密码强度并更改栏的属性。现在我试图让它只是检查密码输入是否包含一个字母。

HTML：

<input type="password" id="pass" name="password" placeholder="Password" required><br><br>
<div id="strength">
    <div id="bar"></div>
</div>

JS：

$("#pass").keyUp(function(){
    var pass = $("#pass");
    if(pass.val().indexOf("a") >= 0){
        $("#bar").css("width","70%");
    }
});

当我进入＆＃39; a＆＃39;虽然进入输入框，但它并没有改变css。有人可以解释一下如何做到这一点吗？提前致谢

Answer 1

只看你的情况，这是docs你的原始代码有“keyUp”失败，在这里我把它改为“keyup”

$("#pass").keyup(function(){
    var pass = $("#pass");
    if(pass.val().indexOf("a") >= 0){
        $("#bar").css("width","70%");
    }
});

这是fiddle link。

Answer 2

在U的函数调用中，您有一个大写的keyUp。它应该全部小写。

$("#pass").keyup(function(){
    var pass = $("#pass");
    if(pass.val().indexOf("a") >= 0){
        $("#bar").css("width","70%");
    }
});

#strength {width: 100%;}
#bar {height: 1em; background: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="pass" name="password" placeholder="Password" required><br><br>
<div id="strength">
    <div id="bar"></div>
</div>

Answer 3

    $("#pass").on("keyup", function(){
        var $pass = $("#pass");
        if($pass.val().indexOf("a") > -1){
         $("bar").css("width","70%");
        }
    });

Answer 4

试试这个，我希望这是你的答案

$("#pass").on("keyup", function(){
    var $pass = $("#pass");
    if($pass.val().indexOf("a") != 0){
        document.getElementById('bar').style.width = 'y0%';
    }
});

在keyUp上搜索输入

4 个答案: