How to change the color bar length with the entered password?

How to change the color bar length with the entered password?

How to change the color bar length with the entered password:
This function is available on many website registration pages. When you enter the password, a color bar will appear below, and the length of the color bar will change with the length of the password entered, in addition, the color of the color bar varies according to the length of the entered password. It is generally used to indicate the password strength. The following describes how to implement this function using jQuery. The code example is as follows:

<! DOCTYPE html> 
The above code basically implements the functions we need. When the content is entered in the text box, the length and color of the following background entries will change. The following describes how to achieve this effect:
I. the keyup event is used here, that is, when the text is input, the event is triggered when the key is released, so that every time a piece of text is input, the length and color of the corresponding background bar are adjusted.
II. var textMax = 20 is used to define the maximum input length of the text box, through $ ("# mytext "). attr ("maxlength", textMax) sets the maxlength attribute of the text box and sets the attribute value to textMax.
III. $ (". box ").css (" width ") returns the width of the box element, $ (" # mytext "). val (). length returns the length of the input content, so that inputlength/textMax can calculate the length of the current input element and the ratio of the maximum input length of the text box, so that the proportional value is multiplied by the width of the box element, the length of the current background bar can be calculated. The code is: (inputlength/textMax) * parseInt (boxlen). Pay special attention to the use of the parseInt () function. Otherwise, the return value is NaN, because the boxlen value is passed through $ (". box ").css (" width ") returns a string followed by" px.
4. The if statement determines the color of the background by determining the length of the current background.
Original address: http://www.51texiao.cn/jqueryjiaocheng/2015/0504/671.html