仿郵箱密碼色條隨輸入長度變化

2013-01-09　來源/作者：懶人圖庫　分類：其他特效　 «»

<!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{width:205px;height:12px;margin-top:10px;border:solid #ccc 1px;}
.len_color{width:1%;background:#F00;height:12px;}
.text{width: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   id="mc20g0a"   class="len_box"><div   id="0qccmsw"   class="len_color"></div></div>
<p>感謝：<a href="mailto:wusong__1986@163.com">SD_night</a>　查找更多代碼，請訪問：<a href="http://www.cxj168.com/" target="_blank">懶人圖庫</a></p>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

仿郵箱密碼色條隨輸入長度變化，適合做密碼強度驗證，推薦下載！

標簽：其他特效