javascript - MVC5 上的掩码输入

Question

所以，我试图在我的输入上添加一些掩码，我已经看到了很多与此相关的信息，但是我找不到处理我的代码的方法。我尝试使用 Jquery 插件屏蔽输入和Inputmask，任何好的结果。

这是我的 JS 代码，其中每个输入都有一个函数:

(document).ready(function () {
     $("#telephone").inputmask("mask", { "mask": "(99) 9999-99999" });
});

$(document).ready(function () {
     $("#phone").mask("(999) 999-9999");
}); 

以及我输入的页面:

<p>phone: <input type="text" id="phone" /></p>
<p>phone: <input type="text" id="telephone" /></p>

在我的_layout上:

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/maskedinput")
@Scripts.Render("~/bundles/inputmask")

我前面绝对没有发生任何事情。

我还是编码新手，英语是我的第二语言，但我希望这个问题是可以理解的。

你们能帮我吗？

Answer 1

如果您不介意使用第三方库，您可能需要研究免费且开源的 Kendo UI Core。

使用非常简单 -

$(function() {
   $("#telephone").kendoMaskedTextBox({
      mask: "(999) 000-0000"
   });
});

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
    
<input id="telephone" value="555 123 4567" />

这里是 Kendo UI Dojo 上的示例代码。