显示/隐藏密码 ASP.NET答案

【问题标题】：Show/Hide Password ASP.NET显示/隐藏密码 ASP.NET
【发布时间】：2021-12-01 09:53:14
【问题描述】：

我正在尝试在 ASP.NET 中实现一个显示/隐藏按钮，通过一些研究我发现使用 AJAX 可能是我最好的选择。我一直在尝试理解 AJAX，但显然我做错了什么，因为代码什么也没做。

我正在尝试将此代码放入我的代码主体中，它与https://www.c-sharpcorner.com/blogs/show-and-hide-password-using-jquery-in-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>

我是否需要实现 AJAX CSS 文件才能使脚本正常运行？上面的链接使用了它们，但是我自己没有实现任何样式，所以我想我可以省略一个指向样式表的链接，如下所示：

<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">

我真的没有任何 AJAX 知识，所以任何帮助将不胜感激:)

【问题讨论】：

AJAX 是当你在后台与服务器通信时，这里根本不需要。 jQuery 是一个 JavaScript 便利库，允许您编写更短的代码来操作 DOM。你所说的“AJAX CSS”是字体真棒和引导程序，当你使用引导程序时需要两个样式表，一个 UI 库。

标签： javascript jquery css asp.net ajax

【解决方案1】：

对于工作演示，我使用了 HTML 元素，您可以对 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>

【讨论】：

【解决方案2】：

嗯，不，你在这里不需要任何特别的东西。 jQuery 确实有帮助，你可以这样做：

        <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>

输出：

如果我们选中显示密码框，那么我们会得到：

所以，上面确实使用了 jQuery，而且它是为你安装的。

您也可以使用纯 JavaScript，但文本模式是只读的，因此您必须制作控件的副本 - 这很痛苦。

【讨论】：