<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ş -->

input#phone-number { /* Firefox, Chrome, Opera */ text-align: center; } #sonucAlan { font-family: Roboto,sans-serif; font-weight: 400; font-size:22px; }

$('#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)); }) .bind('focus click', function () { $phone = $(this); if ($phone.val().length === 0) { $phone.val('('); } else { var val = $phone.val(); $phone.val('').val(val); // Ensure cursor remains at the end } }) .blur(function () { $phone = $(this); if ($phone.val() === '(') { $phone.val(''); } }); $("#dugme").click(function() { var val1 = $('#phone-number').val() $("#sonucAlan").text(val1); });