Tengo un campo de contraseña:

 <input class="form-control" type="password" name="password" required="required" />

Naturalmente, cuando el usuario ingresa la contraseña, está en el patrón ***** por defecto,

Pero quiero agregar algo diferente en este campo significa que cuando el usuario ingresa cualquiera de los caracteres de la contraseña, debe mostrarlo por un tiempo y luego transformarlo en ***.

Vi esto en Iphone que cuando el usuario ingresa el código de acceso, el carácter ingresado actualmente se muestra por un tiempo y luego se transforma en ****. ¿Cómo puedo hacer esto en la aplicación .net? Amablemente alguien me ayude a resolver esto Gracias de antemano.

5
Alina Anjum 12 may. 2016 a las 15:02

5 respuestas

La mejor respuesta

Este fragmento convertirá automáticamente su campo de entrada de contraseña en campo de texto y un campo oculto con el mismo nombre que su campo de contraseña

<input type="password" name="pass" class="pass" />

Se convertirá a

<input type="text" class="pass" />
<input type="hidden" name="pass" class="hidpassw"/>

Aquí no he convertido otro oculto para fines de demostración. A ver si te funciona o no

function createstars(n) {
  return new Array(n+1).join("*")
}


$(document).ready(function() {

  var timer = "";

  $(".panel").append($('<input type="text" class="hidpassw" />'));

  $(".hidpassw").attr("name", $(".pass").attr("name"));

  $(".pass").attr("type", "text").removeAttr("name");

  $("body").on("keypress", ".pass", function(e) {
    var code = e.which;
    if (code >= 32 && code <= 127) {
      var character = String.fromCharCode(code);
      $(".hidpassw").val($(".hidpassw").val() + character);
    }


  });

  $("body").on("keyup", ".pass", function(e) {
    var code = e.which;

    if (code == 8) {
      var length = $(".pass").val().length;
      $(".hidpassw").val($(".hidpassw").val().substring(0, length));
    } else if (code == 37) {

    } else {
      var current_val = $('.pass').val().length;
      $(".pass").val(createstars(current_val - 1) + $(".pass").val().substring(current_val - 1));
    }

    clearTimeout(timer);
    timer = setTimeout(function() {
      $(".pass").val(createstars($(".pass").val().length));
    }, 200);

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
  <input type="password" name="paswd" class="pass" />
</div>

Mientras buscaba, encontré un tutorial para crear un campo de contraseña enmascarado

Aquí hay un enlace jsbin a la demostración de trabajo creando un campo de contraseña enmascarado

Enlace al tutorial para referencia Tutorial

7
Dipak 21 oct. 2019 a las 03:55
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<input type="password" id="confirmPassword"  class="dropbtn">
<button  id="showConfirmPassword" value="show">show</button>
<script>
$("#showConfirmPassword").click(function(){
$('#confirmPassword').attr('type', 'text'); 
setTimeout(function(){$('#confirmPassword').attr('type', 'password'); }, 500);
});
$('#confirmPassword').attr('type', 'password');
</script>
</body>
</html>

¿Qué tal configurar la función setTimeout y mostrarla durante 10-15 segundos?

0
Hema Nandagopal 30 jun. 2017 a las 10:35

He creado un complemento de JQuery al tener una idea de "Garvit Mangal"

https://gist.github.com/tofeeq/92c5b5cd71af26d36a351969d2f97d8e

Tiene la opción de configurar el botón de vista previa y un icono de fuente personalizado para el icono de vista previa, así como algunas mejoras.

Se puede usar de la siguiente manera con el icono de vista previa

$(".pass").xpassword({preview : true, previewFontClass : 'iconview'});

Y sin icono de vista previa

$(".pass").xpassword();
0
Tofeeq 5 jun. 2018 a las 10:50

Solo una idea, podría agregar un campo oculto que contenga su contraseña mientras convierte los contenidos de entrada visibles en puntos.

var showLength = 3;
var delay = 1000;
var hideAll = setTimeout(function() {}, 0);

$(document).ready(function() {
  $("#password").on("input", function() {
    var offset = $("#password").val().length - $("#hidden").val().length;
    if (offset > 0) $("#hidden").val($("#hidden").val() + $("#password").val().substring($("#hidden").val().length, $("#hidden").val().length + offset));
    else if (offset < 0) $("#hidden").val($("#hidden").val().substring(0, $("#hidden").val().length + offset));

    // Change the visible string
    if ($(this).val().length > showLength) $(this).val($(this).val().substring(0, $(this).val().length - showLength).replace(/./g, "•") + $(this).val().substring($(this).val().length - showLength, $(this).val().length));

    // Set the timer
    clearTimeout(hideAll);
    hideAll = setTimeout(function() {
      $("#password").val($("#password").val().replace(/./g, "•"));
    }, delay);
  });
});
#hidden {
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password" type="text" value="" />
<input id="hidden" type="text" value="" />
5
PinkTurtle 13 may. 2016 a las 09:58

Puede usar un complemento Jquery para lograr esto. Aquí está el enlace donde puede obtener el complemento https: // github.com/panzj/jquery-mobilePassword/blob/master/js/jquery.mobilePassword.js

Aquí está el código

$(document).ready(function() {
        $("input[type=password]").mobilePassword();

    });

Código HTML:

<input type="password" name = "password" id = "password" placeholder = "password" class ="input">
2
Pragin M 12 may. 2016 a las 13:02