nicht funktioniert Telefonmaske ASP.NET MVC

Question

Ich versuche, MVC 5 Web-Anwendung in .Net Framework zu entwickeln. Ich versuche, Eingabe auf Formular zu maskieren.

Wie man eine ähnliche Maske für eine Telefonnummer bildet?

Der folgende Code funktioniert nicht

<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 Plugin durch die Erwähnung (von jquery.inputmask.bundle.js in Ihrem Code verwiesen wird), müssen Sie zuerst alle erforderlichen Abhängigkeiten enthalten, wie es in der Dokumentation angegeben:

Inputmask 3.x Documentation

Daher setzen Sie das Skript, um wie folgt aus:

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

Aus meinen Versuchen über dieses Plugin, wird der EditorFor nicht richtig mit ihm gearbeitet, daher müssen Sie EditorFor zu TextBoxFor konvertieren:

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

dann aktivieren maskierten Eingang mit folgenden Zeilen:

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

Beachten Sie, dass, wenn Sie $(...).mask is not a function Fehler in browse angetroffen r Konsole, wahrscheinlich müssen Sie mask zu inputmask ändern.

NB: Wenn Sie maskedInput plugin stattdessen verwenden soll (durch mask() Methode auf Ihren Code zu erwähnen), um das Skript dies ändern:

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

Und dann Maskierungsverfahren halten wie:

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

Siehe .NET Fiddle example, um die Verwendung beider Plugins zu sehen.

Verwandte Themen:

Jquery.inputmask not working

Phone mask with jQuery and Masked Input Plugin