Necesito ayuda con un input type=password, en el edge me sale el ojito para poder ver que escribo pero en chrome y mozilla no me sale el ojo, y no se si sea algun webkit o tengo que hacer un script para que me cambie el tipo de input.
1 respuesta
No todos los navegadores incluyen ese webkit, en este caso, puedes implementarlo por ti mismo. Te dejo uno de ejemplo
$(document).ready(function() {
$("#show_hide_password a").on('click', function(event) {
event.preventDefault();
if($('#show_hide_password input').attr("type") == "text"){
$('#show_hide_password input').attr('type', 'password');
$('#show_hide_password i').addClass( "fa-eye-slash" );
$('#show_hide_password i').removeClass( "fa-eye" );
}else if($('#show_hide_password input').attr("type") == "password"){
$('#show_hide_password input').attr('type', 'text');
$('#show_hide_password i').removeClass( "fa-eye-slash" );
$('#show_hide_password i').addClass( "fa-eye" );
}
});
});
body{
padding:100px 0;
background-color:#efefef
}
a, a:hover{
color:#333
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/b9bdbd120a.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<form>
<div class="form-group">
<label>Clave</label>
<div class="input-group" id="show_hide_password">
<input class="form-control" type="password">
<div class="input-group-addon">
<a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
-
Gracias, entonces tendré que hacer mi propio campo, y gracias también por el ejemplo. Commented el 28 jun. 2022 a las 14:31