时间戳

首页 > 解决方案 > 用星号屏蔽 EditorFor 模型的整数值

jquery - 用星号屏蔽 EditorFor 模型的整数值

问题描述

我在视图中有以下代码：

@Html.EditorFor(model => model.EmployeeId, new { htmlAttributes = new { @class = "form-control", @tabIndex = 4 } })

我的模型有：

        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")]
        [Display(Name = "Badge")]
        [Required]
        public int EmployeeId { get; set; }

我试图让employeeId 文本框的输入变成星号，就好像它是密码一样。我不能使用 PasswordFor 标签，因为我们不希望浏览器保存或提示它。

我知道当字段在 jQuery 中失去焦点时我可以更改实际值，但似乎设置字段文本由于某种原因不起作用并且它一直显示数值。

<script type="text/javascript">

    $('#EmployeeId').focusout(function () {
        $(this).text('***');
    })
</script>

有没有办法让它为用户输入的每个数字显示一个星号，同时保持模型中的真实值？

非常感谢提前！:)

标签： jqueryasp.net-core-2.0

解决方案

用星号屏蔽文本的唯一方法是使用“密码”输入类型，它可用于您想要像这样混淆的任何类型的信息，而不仅仅是密码。

EditorFor但是，它是一个“模板化”帮助器，也就是说，它呈现 HTML 以通过 Razor 视图修改属性。使用的视图基于属性的类型、DataType应用的枚举成员，或通过类似UIHint. 就您的财产而言，这将是Int32.cshtml，因为它是一个 int。但是，我怀疑您是否希望将其应用于每个 int 属性，因此您可能想要分别对应于 a or视图的 add [DataType(DataType.Password)]or 。[UIHint("Obfuscated")]Password.cshtmlObfuscated.cshtml

这些视图将驻留在Views\Shared\EditorTemplates或Pages\Shared\EditorTemplates中，具体取决于您使用的样式。该UIHint属性可以设置为任何内容（我只是选择了“混淆”）。无论您作为字符串放在那里，都需要为相应的视图命名。

现在，假设这些都不是真的：没有Int32.cshtml编辑器模板视图，并且DataType/UIHint属性尚未应用，那么EditorFor将回退到默认模板，对于 int 属性，它将是“数字”类型的输入。在 ASP.NET MVC 5 中，只能通过传递带有htmlAttributes成员的匿名对象来在这些默认模板中添加/修改 HTML 属性，该成员本身就是属性名称和值的匿名对象：

@Html.EditorFor(x => x.EmployeeId, new { htmlAttributes = new { type = "password" } })

我不确定这在 ASP.NET Core 中是否同样有效，因为我从来不需要尝试，但如果你愿意，你可以试一试。

不过，总的来说，无论如何都使用标签助手要好得多。而不是使用@Html.EditorFor(x => x.EmployeeId)，你可以这样做：

<input asp-for="EmployeeId" />

然后，您可以通过以下方式轻松地将其设置为密码字段：

<input asp-for="EmployeeId" type="password" />

推荐阅读