-
在很多网站的注册页面有这样的功能，当用户输入一个密码，下面会出现颜色变化，颜色，长度将按照输入的密码，和彩色的颜色会根据输入的密码长度是可以改变的，一般用于提示密码强度。以下是一个简短的介绍了如何使用jQuery来实现这个功能的代码示例如下：
{。箱
宽度：200px；
身高：10px；
边境：1px solid # CCC；
左：58px保证金；
}
{。BG
身高：10px；
}
$（文档）Ready（函数（）{）
$（# mytext）。Keyup（function（）{）
无功textmax = 20；
$（# mytext）。Attr（最大长度
VaR len =美元（# mytext）。瓦迩（长度）；
无功boxlen = $（箱），Css（宽度）；
无功用户输入长度= $（# mytext）。瓦迩（长度）；
无功bgwidth =（用户输入长度/ textmax）* parseInt（boxlen）；
$（）。Css（宽度
如果（bgwidth＜60）
{
$（）。Css（背景颜色
}
如果（60 <= bgwidth bgwidth＜120）
{
$（）。Css（背景颜色
}
如果（bgwidth > = 120）
{
$（）。Css（背景颜色
}
}）
}）
用户名称：
上面的代码基本上实现了我们需要的功能。输入文本框后，背景长度和颜色由以下内容改变。下面简要介绍如何实现此效果：
首先，我们使用KeyUp事件，即当输入的文本被释放，当释放该键时，将触发该事件，从而达到背景的杆的长度和颜色调整进入文本。
两。VAR textmax = 20是用来定义文本框的最大输入长度，通过美元的文本框的MaxLength属性（# mytext）。Attr（最大长度
三美元（箱），Css（宽度）箱返回元素的宽度，$（# mytext）。瓦迩（长度）返回的内容输入长度，所以用户输入长度/ textmax可以计算文本和当前输入框的元素最大输入长度比长度的值乘以框元素的宽度可以在当前时代背景下的计算长度的比例，代码：（用户输入长度/ textmax）* parseInt（boxlen），这里要特别注意的parseInt（）函数的使用，否则返回值是南，因为boxlen值通过$（箱），Css（宽度）返回字符串，后来随着PX单元。
四个if语句通过判断当前背景条的长度来确定背景条的颜色。
这一切都是本文的全部内容。我希望你能喜欢它。