Bootstrap Snippet Phone mask with jQuery and Masked Input using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container"><!-- container başlangıç  -->
<h1>Phone mask with jQuery and Masked Input(Amateur)</h1>
<br />
    <!-- I used an input type of text here so browsers like Chrome do not display the spin box -->
    <input class="form-control" id="phone-number" name="phone-number" type="text" maxlength="14" placeholder="(XXX) XXX-XXXX" /><br /><br />
<br>
        <button class="btn btn-primary btn-lg" id="dugme">Tıkla</button>
 <br />
 <br />
  <br />
<label>Result </label>
    <div class="alert alert-success" id="sonucAlan">
        .
    </div>    
      
</div><!-- container bitiş  -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
input#phone-number {
                 
                /* Firefox, Chrome, Opera */
                text-align: center;
            }
            
#sonucAlan {
font-family: Roboto,sans-serif;
font-weight: 400;
font-size:22px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$('#phone-number')
    .keydown(function (e) {
        var key = e.which || e.charCode || e.keyCode || 0;
        $phone = $(this);
    // Don't let them remove the starting '('
    if ($phone.val().length === 1 && (key === 8 || key === 46)) {
            $phone.val('('); 
      return false;
        } 
    // Reset if they highlight and type over first char.
    else if ($phone.val().charAt(0) !== '(') {
            $phone.val('('+String.fromCharCode(e.keyCode)+''); 
        }
        // Auto-format- do not expose the mask as the user begins to type
        if (key !== 8 && key !== 9) {
            if ($phone.val().length === 4) {
                $phone.val($phone.val() + ')');
            }
            if ($phone.val().length === 5) {
                $phone.val($phone.val() + ' ');
            }           
            if ($phone.val().length === 9) {
                $phone.val($phone.val() + '-');
            }
        }
        // Allow numeric (and tab, backspace, delete) keys only
        return (key == 8 || 
                key == 9 ||
                key == 46 ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105)); 
    })
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Phone mask with jQuery and Masked Input"
Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Phone mask with jQuery and Masked Input" Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Phone mask with jQuery and Masked Input"
Bootstrap 4.1.1 Snippet by muhittinbudak