0
225
VistasMostrar/Ocultar contraseña ASP.NET
Estoy tratando de implementar un botón mostrar/ocultar en ASP.NET y, a través de algunas investigaciones, descubrí que usar AJAX podría ser mi mejor opción. He estado tratando de entender AJAX, pero claramente estoy haciendo algo mal ya que el código no hace nada.
Estoy tratando de poner este código en el cuerpo de mi código, es esencialmente el mismo código que se encuentra en https://www.c-sharpcorner.com/blogs/show-and-hide-password-using-jquery- en-asp-net
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("<%=showP.ClientID %>").hover(function show() { //Change the attribute to text $("<%=txtPassword.ClientID %>").attr('type', 'text'); $("<%=showP.ClientID %>").removeClass('eyeOpen').addClass('eyeClosed'); }, function () { //Change the attribute back to password $("<%=txtPassword.ClientID %>").attr('type', 'password'); $("<%=showP.ClientID %>").removeClass('eyeClosed').addClass('eyeOpen'); }); //CheckBox Show Password $("<%=showP.ClientID %>").click(function () { $("<%=txtPassword.ClientID %>").attr('type', $(this).is(':checked') ? 'text' : 'password'); }); }); </script>¿Necesito implementar los archivos AJAX CSS para que funcione el script? El enlace de arriba hace uso de ellos, pero yo no implementé ninguno de los estilos, así que pensé que podía dejar un enlace a las hojas de estilo como esta a continuación:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">Realmente no tengo ningún conocimiento de AJAX, por lo que cualquier ayuda sería muy apreciada :)
2 Respuestas
Responde la pregunta0
Bueno, no, no necesitas nada realmente especial aquí. jQuery SÍ ayuda, y puedes hacerlo de esta manera:
<h3>Enter password</h3> <asp:TextBox ID="txtPass" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox> <br /> <br /> <asp:CheckBox ID="ckShowPass" runat="server" Text="Show password" onclick="myshowp()" /> <script> function myshowp() { ckbox = $('#ckShowPass') txtBox = $('#txtPass') if (ckbox.is(':checked')) { txtBox.attr("Type", "Text"); } else { txtBox.attr("Type", "Password"); } } </script>Producción:
Y si marcamos la casilla mostrar contraseña, entonces obtenemos:
Entonces, lo anterior SÍ usa jQuery, y eso está instalado para usted.
También puede usar JavaScript puro, pero el modo de texto es de solo lectura y, por lo tanto, debe hacer una copia del control, lo cual es doloroso.
0
para la demostración de trabajo, utilicé el elemento HTML, puede hacer lo mismo con el elemento Asp.Net.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <h3>Enter password</h3> <input id="txtPass" class="test" type="password"></input> <br /> <br /> show <input type="checkbox" name="mycheckbox" id="ckShowPass" onclick="myshowp(this)"/> <script> function myshowp(e) { txtBox = $('#txtPass') if (e.checked) { txtBox.attr("Type", "Text"); } else { txtBox.attr("Type", "Password"); } } </script>