不工作的手机掩码ASP.NET MVC

我尝试在.NET Framework中开发MVC 5 Web应用程序。我试图掩盖表单上的输入。不工作的手机掩码ASP.NET MVC

如何制作电话号码的类似掩码？

下面的代码不起作用

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

来源

2017-04-04 SOFL

你的剧本是你的HTML之前（并试图插件应用到尚不存在的元素）。将您的脚本移动到紧接在''标签之前，或者在'$（document）.ready（）' –

更改订单脚本文件中首先包装到jquery最小文件 –

那？ – SOFL

通过提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

回答

相关问题