Html PasswordInput

Set the strengthTypeRenderer property of the jqxPasswordInput. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<input type="password" id='input' />

JavaScript

$("#input").jqxPasswordInput({
       width: '250px',
       height: '25px',
       showStrength: true,
       strengthTypeRenderer: function (password, characters, defaultStrength) {
           var length = password.length;
           var letters = characters.letters;
           var numbers = characters.numbers;
           var specialKeys = characters.specialKeys;
           var strengthCoefficient = letters + numbers + 2 * specialKeys + letters * numbers / 2 + length;
           var strengthValue;
           var color;
           if (length < 8) {
               strengthValue = "Too short";
               color = "rgb(170, 0, 51)";
           } else if (strengthCoefficient < 20) {
               strengthValue = "Weak";
               color = "rgb(170, 0, 51)";
           } else if (strengthCoefficient < 30) {
               strengthValue = "Fair";
               color = "rgb(255, 204, 51)";
           } else if (strengthCoefficient < 40) {
               strengthValue = "Good";
               color = "rgb(45, 152, 243)";
           } else {
               strengthValue = "Strong";
               color = "rgb(118, 194, 97)";
           };
           return "<div style='color: " + color + ";'>" + strengthValue + "</div>";
       }
   });