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

【问题标题】：not working phone mask ASP.NET MVC不工作的电话掩码 ASP.NET MVC
【发布时间】：2017-04-04 12:06:43
【问题描述】：

我尝试在 .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>

【问题讨论】：

您的脚本在您的 html 之前（并且正在尝试将插件应用于尚不存在的元素）。将您的脚本移动到关闭 </body> 标记之前，或包含在 $(document).ready()
首先将订单脚本文件更改为 jquery min 文件
那个？
不管用什么

标签： html css asp.net-mvc web-deployment

【解决方案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 了解这两个插件的使用情况。