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>
<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
Post a Comment