用星号屏蔽模型的整数值的编辑器

Question

我在视图中有以下代码：

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

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

提前非常感谢！ :)

Answer 1

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

然而，EditorFor是一个"模板化"的帮助程序，也就是说，它通过 Razor 视图呈现用于修改属性的 HTML。使用的视图基于属性的类型、应用的DataType枚举的成员，或通过类似UIHint的内容显式。就您这里的财产而言，这将是Int32.cshtml，因为它是一个整数。但是，我怀疑您是否希望将其应用于每个int属性，因此您希望添加[DataType(DataType.Password)]或[UIHint("Obfuscated")]，它们分别对应于Password.cshtml或Obfuscated.cshtml视图。

这些视图将驻留在ViewsSharedEditorTemplates或PagesSharedEditorTemplates，具体取决于您采用的样式。UIHint属性可以设置为任何内容(我只是选择了"混淆"(。无论您作为字符串放在那里是什么，都需要命名相应的视图。

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

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

我不确定这在 Core 中是否 ASP.NET 相同，因为我从未需要尝试过，但如果您愿意，您可以试一试。

不过，一般来说，无论如何只使用标记帮助程序要好得多。与其使用@Html.EditorFor(x => x.EmployeeId)，您可以只做：

<input asp-for="EmployeeId" />

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

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