Поиск ввода на keyUp

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%"); 
    } 
}); 

Когда я вхожу 'а' в поле ввода не меняет CSS, хотя. Может кто-нибудь объяснить, как это сделать? Заранее спасибо

Answer 1

попробовать это, я надеюсь, что ваш ответ

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

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

Просто смотреть ваш случай, вот docs Ваш оригинальный код "KeyUp", который выходит из строя, здесь я изменил его на "KeyUp"

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

Вот fiddle link.

Answer 4

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