时间戳

首页 > 解决方案 > 单击时如何将 Html.PasswordFor 更改为 Html.TextboxFor？

javascript - 单击时如何将 Html.PasswordFor 更改为 Html.TextboxFor？

问题描述

当我单击Javascript 或 jQuery 时单击span要更改的标记Html.PasswordFor()时。Html.TextboxFor()我怎样才能做到这一点？我在输入字段中知道这一点，但在 Html Helpers 中我不知道。

@Html.PasswordFor(x => x.Parola, new 
{ 
  placeholder = "Password *", 
  @class = "form-control p-4 font-weight-bold mb-4", 
  style = "position:relative;", 
  required = "required" 
})
                                
<span style="position:absolute;right:20px;top:192px;">
  <i class="fas fa-eye fa-1x"></i>
</span>

标签： javascriptjquerycssasp.net-coreasp.net-core-mvc

解决方案

当我单击Javascript 或 jQuery 时单击我想要更改的跨度标记Html.PasswordFor()时。Html.TextboxFor()我怎样才能做到这一点？

正如评论中提到的@charlietfl 和@freedomn-m，诸如此类的Html.PasswordFor()HTMLHtml.TextboxFor()助手（或其他标签助手）使Web 开发人员能够在服务器端以C# 代码创建和呈现HTML 元素。JavaScript 或 jQuery 代码在浏览器客户端执行，因此您不能在 JS 客户端直接更改这些服务器端 HTML Helpers 代码。

此外，如果您想从客户端将密码输入动态切换为常规文本输入，您可以尝试：

html代码片段

<span id="btnpwdmode" style="position:absolute;right:20px;top:192px;">
    <i class="fa fa-eye fa-1x"></i>
</span>

jQuery 代码片段

$("#btnpwdmode").click(function () {
    var pwd_input_mode = $("#ID").attr("type");

    if (pwd_input_mode == "password") {
        $("#ID").attr("type", "text");
    } else {
        $("#ID").attr("type", "password");
    }
})

有关 HTML Helpers 和 Tag Helpers 的更多信息，您可以查看此文档：

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-5.0#tag-helpers-compared-to-html-helpers

推荐阅读