网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

输入框提示随着输入长度的变化发生颜色变化的js效果

发表于2014/7/8 ⁄ JS网页特效 ⁄ 1条评论 ⁄ 热度 3,310℃

我们在注册或者登陆填写表单时，经常会看到随着我输入的变化，输入框的提示栏也跟着变化，觉得这个功能很不错。前几天写了一小段代码实现这个功能，本着分享是一种精神，今天就分享给大家。

<!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 class="len_box"><div class="len_color"></div></div>
  <p>更多JS特效请访问：<a href="http://www.webym.net/jiaocheng//" target="_blank">网页制作教程</a></p>
  </body>
  </html>

运行代码提示：您可以先修改部分代码再运行。

适合用户密码强度验证等，推荐使用！

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/32.html