jQuery-Condition Statements

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery/jquery.js"></script>
<style>
.textcolor {
background:#F90;
color:#FFF;
width:100px;
padding-left:50px;
text-align:center;
}
.textcolor2 {
color:#fff;
background:#090;
padding-left:150px;
text-align:center;
}
.textcolor3 {
background:#F30;
color:#fff;
padding:5px;
width:50px;
text-align:center;
}
</style>
</head>

<body>


Password
<input type="password" size="20" id="inputid">

<span></span>





<script>
$("document").ready(function() {


    $("#inputid").keyup(function(){

var inputlen=$("#inputid").val().length;

if(inputlen>=10){
$("span").text("strong");
$("span").addClass("textcolor2");
$("span").removeClass("textcolor3");
}
else if(inputlen>=6) {
$("span").text("normal");
$("span").addClass("textcolor");
$("span").removeClass("textcolor2");
$("span").removeClass("textcolor3");
}
else if(inputlen>=4) {
$("span").text("week");
$("span").addClass("textcolor3");
$("span").removeClass("textcolor2");
$("span").removeClass("textcolor")
}

});

});
</script>
</body>
</html>

Comments

Popular posts from this blog

Child Development and Pedagogy - MCQ-02

Child Development and Pedagogy - MCQ

Historical Evolution of Education in India and Acts and Rights in Indian Education