如何在 ASP.NET MVC 核心 UI 中制作虛線輸入掩碼

Question

我有一個 ASP.NET MVC 核心項目，我有一個具有輸入掩碼的國家代碼字段，如下圖所示。 我怎樣才能用 jquery 做到這一點：

任何幫助都會得到幫助

Answer 1

正如@Mohammad 提到的那樣，下載 js 庫並將其包含在 lib 文件夾中

你的布局

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - InpustMaskField</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/InpustMaskField.styles.css" asp-append-version="true" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/jquery/dist/jquery.maskedinput.js"></script>
    @await RenderSectionAsync("ScriptsHeader", required: false)
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">InpustMaskField</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2022 - InpustMaskField - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

你的索引視圖

  @{
    ViewData["Title"] = "Home Page";
}
@section ScriptsHeader{
    <script type="text/javascript">
        $(document).ready(function ($) {
            $.mask.definitions['~'] = "[+-]";
            $("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy", completed: function () { alert("completed!"); } });
            $(".phone").mask("(999) 999-9999");
            $("#phoneExt").mask("(999) 999-9999? x99999");
            $("#iphone").mask("+33 999 999 999");
            $("#tin").mask("99-9999999");
            $("#ssn").mask("999-99-9999");
            $("#product").mask("a*-999-a999", { placeholder: " " });
            $("#eyescript").mask("~9.99 ~9.99 999");
            $("#po").mask("PO: aaa-999-***");
            $("#pct").mask("99%");
            $("#phoneAutoclearFalse").mask("(999) 999-9999", { autoclear: false, completed: function () { alert("completed autoclear!"); } });
            $("#phoneExtAutoclearFalse").mask("(999) 999-9999? x99999", { autoclear: false });

            $("input").blur(function () {
                $("#info").html("Unmasked value: " + $(this).mask());
            }).dblclick(function () {
                $(this).unmask();
            });
        })
    </script>



}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<table>
    <tr><td>Date</td><td><input id="date" value="1231" type="text" tabindex="1" /></td><td>99/99/9999</td></tr>
    <tr><td>Phone</td><td><input class="phone" type="text" tabindex="2" /></td><td>(999) 999-9999</td></tr>
    <tr><td>Phone(Readonly)</td><td><input class="phone" type="text" tabindex="2" readonly /></td><td>(999) 999-9999</td></tr>
    <tr><td>Phone + Ext</td><td><input id="phoneExt" type="text" tabindex="2" /></td><td>(999) 999-9999? x99999</td></tr>
    <tr><td>Int'l Phone</td><td><input id="iphone" type="text" tabindex="2" /></td><td>+33 999 999 999</td></tr>
    <tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3" /></td><td>99-9999999</td></tr>
    <tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4" /></td><td>999-99-9999</td></tr>
    <tr><td>Product Key</td><td><input id="product" type="text" tabindex="5" /></td><td>a*-999-a999</td></tr>
    <tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6" /></td><td>~9.99 ~9.99 999</td></tr>
    <tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6" /></td><td>aaa-999-***</td></tr>
    <tr><td>Percent</td><td><input id="pct" type="text" tabindex="6" /></td><td>99%</td></tr>
    <tr><td>Phone (autoclear=false)</td><td><input id="phoneAutoclearFalse" type="text" tabindex="6" /></td><td>(999) 999-9999</td></tr>
    <tr><td>Phone + Ext (autoclear=false)</td><td><input id="phoneExtAutoclearFalse" type="text" tabindex="6" /></td><td>(999) 999-9999? x99999</td></tr>
</table>
<div id="info"></div>

如何在 ASP.NET MVC 核心 UI 中制作虛線輸入掩碼

問題描述

1 個解決方案

解決方案1
0 2022-03-12 07:24:25

如何在 ASP.NET MVC 核心 UI 中制作虛線輸入掩碼

問題描述

1 個解決方案

解決方案1 0 2022-03-12 07:24:25

解決方案1
0 2022-03-12 07:24:25