<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿邮箱密码色条随输入长度变化-懒人图库</title>
<style>
.len_box{205px;height:12px;margin-top:10px;border:solid #ccc 1px;}
.len_color{1%;background:#F00;height:12px;}
.text{200px;height:22px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function(){
$(".text").keyup(function(){
var Max = 20;//input_maxlength
$(".text").attr("maxlength",Max);
var len = $(".text").val().length;
var Width = (len/Max)*parseInt($(".len_box").css("width"));
$(".len_color").css({"width":Width})
if(Width<20){
$(".len_color").css({"background":"#F00"})
}else if(20<=Width && Width<50){
$(".len_color").css({"background":"#F90"})
}else if(Width>=50){
$(".len_color").css({"background":"#6F3"})
}
})
})
</script>
</head>
<body>
<p>请先刷新页面，再输入字符查看效果：</p>
<p>
<input type="text" class="text">
</p>
<div class="len_box"><div class="len_color"></div></div>
</body>
</html>