显示/隐藏密码ASP.NET
显示/隐藏密码ASP.NET
提问于 2021-10-12 12:29:51
我正在尝试在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一无所知，所以如果有任何帮助，我将不胜感激:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-12 22:16:56
对于工作演示，我使用了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>
Stack Overflow用户
发布于 2021-10-12 15:11:21
嗯，不，你不需要什么特别的东西。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>输出：
如果我们勾选了show password框，我们就会得到：
因此，上面的代码使用了jQuery，这是为您安装的有用工具。
您也可以使用纯JavaScript，但文本模式是只读的，因此您必须复制控件-这是痛苦的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69546664
复制相关文章
相似问题
腾讯云开发者
