I have a problem with the bootstrap-show-password plugin. I try to do a maximum password size control in a KeyUp to get a warning just when I complete the maximum size and it does not work when I clicked on the "eye button" to see the password. In this mode where the password can be seen, the keyup event does not fire. I have associated it with a class but it also does not work if I associate it with an id. Nor does it seem to pay attention to maxlength = 16 in this mode. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="enterPass" class="form-group col-md-6">
<label>Contraseña</label>
<input id="passwd" type="password" name="passwd" maxlength=16 class="form-control control-Longitud" data-toggle="password" data-placement="after" required/>
<div id="passwdHelp" style="visibility:hidden;" class="form-text text-muted helpCampo">Máximo permitido 16 carácteres</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<script>
$(function() {
var max_long_password=16;
$('#password').password();
$('.control-Longitud').keyup(function(){
var chars = $(this).val().length;
var diff = max_long_password - chars;
if (diff==0){
$("#passwdHelp").css("visibility", "visible");
}
else{
$("#passwdHelp").css("visibility", "hidden");
}
});
});
</script>
</body>
</html>