CODEWITHSUNDEEP
jquerymask
Felicyia
Felicyia

Reputation: 139

html/jquery .mask organinzing phone number

i'm using:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script>
jQuery(function($){
$("#phone").mask("(999) 999-9999? x99999", {placeholder:" "});
});
</script>

I don't know if i'm overlooking something simple or what or maybe i did the html stuff wrong:

Phone number: <input type="text" id="phone" name="phoneNumber"/>

My objective is to make it look like (999) 999-9999 with hidden ext. 999 if they don't need it. but the whole script isn't working or doing anything at all.

Upvotes: 1

Views: 3383

Answers (2)

uyelik posta
uyelik posta

Reputation: 11

document.getElementById('kisicep_telefonu').addEventListener('input', function(e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});
<div class="form-group form-material col-md-6" data-plugin="formMaterial">
  <label class="form-control-label" for="kisicep_telefonu">Cep Telefonunuz</label>
  <span class="required" style="color:red">*</span>
  <input type="text" class="form-control" id="kisicep_telefonu" name="kisicep_telefonu" autocomplete="off" value="" placeholder="(000) 000-0000 ">
</div>

Upvotes: 1

Melvinr
Melvinr

Reputation: 534

You don't need the placeholder section.

Just add

$("#phone").mask("(999) 999-9999? x99999");

EDIT

Check out this jsfiddle

Upvotes: 2

Related Questions