java script for phone number masking in mvc

S P

How to mask phone numbers with javascript code in mvc textboxFor?

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo8y ago
the code for textboxfor is

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

the jquery I am given bellow u may use javascript
@section Scripts{
"text/javascript" src="/Scripts/jquery-1.8.3.min.js"  charset="utf-8">
    "text/javascript" src="/Scripts/jquery.maskedinput.min.js">


    "text/javascript">
        $(function () {
            $("#phone").mask("(999) 999-9999");
        });

}
Sourabh Somani8y ago
When you will do
Html.TextBoxFor(m => m.Phone)
It will generate
"Phone" name="Phone" type="text" />
Now accordingly you can write your javascript.
Thats why i am giving you a very simple solution.
Sanwar Ranwa8y ago
this may help you

https://www.codeproject.com/Tips/846537/Input-Masking-with-ASP-NET-MVC
Laxmidhar Sahoo8y ago
hi
@sourabh

u are telling about input type
when the questrion is in textboxfor
Sourabh Somani8y ago
https://codepen.io/chriscoyier/pen/PbOEqL
Sourabh Somani8y ago
1. document.getElementById('phone').addEventListener('input', function (e) {
2. var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
3. e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
4. });
1. Html.TextBoxFor(m => m.Phone)

create a function and call in textboxfor in the arguments of htmlargs