Question

我尝试在.Net Framework中开发MVC 5 Web应用程序。我尝试在表单上屏蔽输入。

如何为电话号码制作类似的面具？

以下代码不起作用

<script src="~/Scripts/jquery.inputmask/jquery.inputmask.bundle.js">
</script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
  $('#phone').mask("+7(999)999-99-99");
</script>


<div class="form-group">
   <div class="col-md-10">
      <span style="font-weight: bold;">Phone:</span>
      @Html.EditorFor(model => model.Phoneord, new { htmlAttributes = new { @class = "form-control", @id = "phone" } })
      @Html.ValidationMessageFor(model => model.Phoneord, "", new { @class = "text-danger" })
   </div>
</div>

Answer 1

通过提及inputmask插件（来自代码中引用的jquery.inputmask.bundle.js），首先需要包含文档中给出的所有必需依赖项：

Inputmask 3.x Documentation

因此，请按以下方式设置脚本顺序：

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.inputmask/jquery.inputmask.bundle.js"></script>

根据我对此插件的实验，EditorFor无法正常使用，因此您需要将EditorFor转换为TextBoxFor：

@Html.TextBoxFor(model => model.Phoneord, new { @class = "form-control", @id = "phone" })

然后，使用以下行激活屏蔽输入：

$(document).ready(function () {
    $('#phone').inputmask("+7(999)999-99-99");
}

请注意，如果您在浏览器控制台中遇到$(...).mask is not a function错误，则可能必须将mask更改为inputmask。

注意：如果您打算使用maskedInput plugin（通过在代码中提及mask()方法），请将脚本更改为：

<script src="~/Scripts/jquery.maskedinput.js"></script>

然后按原样保持屏蔽方法：

$(document).ready(function ($) {
   $('#phone').mask("+7(999)999-99-99");
});

请参阅.NET Fiddle example以查看两个插件的使用情况。

不工作的电话掩码ASP.NET MVC

1 个答案: