JQuery ile bir telefon numarası nasıl biçimlendirilir

Şu anda gibi telefon numaralarını görüntülüyorum 2124771000. Ancak, ben örneğin bir daha insan tarafından okunabilir biçimde biçimlendirilmiş olması numarası gerekmektedir: 212-477-1000. İşte benim akımım HTML:

<p class="phone">2124771000</p>

Basit: http://jsfiddle.net/Xxk3F/3/

$('.phone').text(function(i, text) {
    return text.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
});

Veya: http://jsfiddle.net/Xxk3F/1/

$('.phone').text(function(i, text) {
    return text.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '$1-$2-$3');
});

Not: .text () yöntemi girdi öğelerinde kullanılamaz. Giriş alanı metni için .val () yöntemini kullanın.

var phone = '2124771000',
    formatted = phone.substr(0, 3) + '-' + phone.substr(3, 3) + '-' + phone.substr(6,4)

Tamamen tamsayılarla çalıştığınızdan emin olmayı unutmayın.

var separator = '-';
$( ".phone" ).text( function( i, DATA ) {
    DATA
        .replace( /[^\d]/g, '' )
        .replace( /(\d{3})(\d{3})(\d{4})/, '$1' + separator + '$2' + separator + '$3' );
    return DATA;
});

İşte bu cevaplardan bazılarının bir kombinasyonu. Bu, giriş alanları için kullanılabilir. 7 ve 10 basamaklı telefon numaralarıyla ilgilenir.

// Used to format phone number
function phoneFormatter() {
  $('.phone').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) {
      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
    }
    $(this).val(number)
  });
}

Canlı örnek: JSFiddle

Bunun soruyu doğrudan cevaplamadığını biliyorum, ancak cevapları ararken bulduğum ilk sayfalardan biriydi. Yani bu cevap, aradığıma benzer bir şey arayan herkes içindir.

Telefon numarasını işlemek için bir kitaplık kullanın. Google Libphonenumber en iyi bahsinizdir.

// Require `PhoneNumberFormat`.
var PNF = require('google-libphonenumber').PhoneNumberFormat;

// Get an instance of `PhoneNumberUtil`.
var phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();

// Parse number with country code.
var phoneNumber = phoneUtil.parse('202-456-1414', 'US');

// Print number in the international format.
console.log(phoneUtil.format(phoneNumber, PNF.INTERNATIONAL));
// => +1 202-456-1414

Bu paketi seegno ile kullanmanızı tavsiye ederim .

ABD telefon numaralarını (XXX) XXX-XXX olarak biçimlendirmeniz için jsfiddle bağlantısını sağladım

 $('.class-name').on('keypress', function(e) {
  var key = e.charCode || e.keyCode || 0;
  var phone = $(this);
  if (phone.val().length === 0) {
    phone.val(phone.val() + '(');
  }
  // 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() + '-');
    }
    if (phone.val().length >= 14) {
      phone.val(phone.val().slice(0, 13));
    }
  }

  // Allow numeric (and tab, backspace, delete) keys only
  return (key == 8 ||
    key == 9 ||
    key == 46 ||
    (key >= 48 && key <= 57) ||
    (key >= 96 && key <= 105));
})

.on('focus', 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
  }
})

.on('blur', function() {
  $phone = $(this);

  if ($phone.val() === '(') {
    $phone.val('');
  }
});

Canlı örnek: JSFiddle

bunun gibi bir şey dene ..

jQuery.validator.addMethod("phoneValidate", function(number, element) {
    number = number.replace(/\s+/g, ""); 
    return this.optional(element) || number.length > 9 &&
        number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$("#myform").validate({
  rules: {
    field: {
      required: true,
      phoneValidate: true
    }
  }
});

Tam ve ünlü libphonenumber'ın daha küçük bir versiyonu olan libphonenumber-js'yi ( https://github.com/halt-hammerzeit/libphonenumber-js ) düşünün.

Hızlı ve kirli örnek:

$(".phone-format").keyup(function() {
// Don't reformat backspace/delete so correcting mistakes is easier
if (event.keyCode != 46 && event.keyCode != 8) {
    var val_old = $(this).val();
    var newString = new libphonenumber.asYouType('US').input(val_old);
    $(this).focus().val('').val(newString);
}
});

(Bir kitaplık indirmesini önlemek için bir normal ifade kullanırsanız, geri almada / silme işleminde yeniden biçimlendirmekten kaçının, yazım hatalarını düzeltmeyi kolaylaştırır.)

Alternatif bir çözüm:

function numberWithSpaces(value, pattern) {
  var i = 0,
    phone = value.toString();
  return pattern.replace(/#/g, _ => phone[i++]);
}

console.log(numberWithSpaces('2124771000', '###-###-####'));

Bir jQuery eklentisi aracılığıyla telefon numaralarını otomatik olarak biçimlendirmenin bir yolunu ararken bu soruyu buldum. Kabul edilen cevap, ihtiyaçlarım için ideal değildi ve ilk yayınlanmasından bu yana 6 yıl içinde çok şey oldu. Sonunda çözümü buldum ve gelecek nesil için burada belgeliyorum.

Sorun

Telefon numarası html giriş alanımın değeri kullanıcı yazarken otomatik olarak biçimlendirmesini (maskelemesini) istiyorum.

Çözüm

Check Cleave.js . Bu sorunu ve diğer birçok veri maskeleme sorununu çözmenin çok güçlü / esnek ve kolay bir yoludur.

Bir telefon numarasını biçimlendirmek şu kadar kolaydır:

var cleave = new Cleave('.input-element', {
    phone: true,
    phoneRegionCode: 'US'
});

Giriş:

4546644645

Kod:

PhoneNumber = Input.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, "($1)$2-$3");

Çıktı:

(454)664-4645

Kendi kodunuzu hızlıca alın:

İşte Cruz Nunez'in yukarıdaki çözümünden değiştirilmiş bir çözüm .

// Used to format phone number
function phoneFormatter() {
  $('.phone').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length < 7) {
      number = number.replace(/(\d{0,3})(\d{0,3})/, "($1) $2");
    } else if (number.length <= 10) {
    number = number.replace(/(\d{3})(\d{3})(\d{1,4})/, "($1) $2-$3");
    } else {
    // ignore additional digits
    number = number.replace(/(\d{3})(\d{1,3})(\d{1,4})(\d.*)/, "($1) $2-$3");
    }
    $(this).val(number)
  });
};

$(phoneFormatter);

JSFiddle

• Bu çözümde, kullanıcı kaç basamak girmiş olursa olsun biçimlendirme uygulanır. (Nunes çözümünde, biçimlendirme yalnızca tam olarak 7 veya 10 basamak girildiğinde uygulanır.)

• 10 basamaklı bir ABD telefon numarasının girilmesi için posta kodu gerekir.

• Bununla birlikte, her iki çözüm de, yazılan rakamlar her zaman sona eklendiğinden, önceden girilmiş rakamları düzenlemek sorunludur.

• Bunun yerine, aşağıda belirtilen sağlam jQuery Mask Eklenti kodunu öneririm:

JQuery Mask Eklentisini Önerin

Ben kullanmanızı tavsiye jQuery Plugin Maske , (sayfa canlı örnekler vardır) üzerinde github .
Bu bağlantıların nasıl kullanılacağına dair minimum açıklamalar var:

• https://dobsondev.com/2017/04/14/using-jquery-mask-to-mask-form-input/
• http://www.igorescobar.com/blog/2012/05/06/masks-with-jquery-mask-plugin/
• http://www.igorescobar.com/blog/2013/04/30/using-jquery-mask-plugin-with-zepto-js/

CDN
Kodu yüklemek / barındırmak yerine, jQuery Mask Eklentisi için CDN Bağlantısı komut dosyasının CDN'sine bir bağlantı da ekleyebilirsiniz.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>

veya
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>

WordPress Contact Form 7: Masks Form Fields eklentisini kullanın

Bir WordPress sitesinde Contact Form 7 eklentisini kullanıyorsanız, form alanlarını kontrol etmenin en kolay yolu, sizin için ilgilenmek için giriş alanınıza bir sınıf ekleyebilmenizdir.
Masks Form Fields eklentisi , bunu yapmayı kolaylaştıran bir seçenektir.
Bu seçeneği seviyorum, çünkü dahili olarak, kodun küçültülmüş bir sürümünü yukarıda bahsedilen jQuery Mask Plugin'den .

İletişim Formu 7 formundaki örnek kullanım:

<label> Your Phone Number (required)
    [tel* customer-phone class:phone_us minlength:14 placeholder "(555) 555-5555"]
</label>

Burada önemli olan kısım class:phone_us.
Not kullanırsanız o minlength/ maxlength, uzunluk basamak ek olarak maske karakterleri içermelidir.

 $(".phoneString").text(function(i, text) {
            text = text.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
            return text;
        });

Çıktı :-( 123) 657-8963

Aşağıdaki olay işleyicisi gerekli olanı yapmalıdır:

$('[name=mobilePhone]').on('keyup', function(e){
                    var enteredNumberStr=this.$('[name=mobilePhone]').val(),                    
                      //Filter only numbers from the input
                      cleanedStr = (enteredNumberStr).replace(/\D/g, ''),
                      inputLength=cleanedStr.length,
                      formattedNumber=cleanedStr;                     
                                      
                      if(inputLength>3 && inputLength<7) {
                        formattedNumber= cleanedStr.substr(0,3) + '-' + cleanedStr.substr(3,inputLength-1) ;
                      }else if (inputLength>=7 && inputLength<10) {
                          formattedNumber= cleanedStr.substr(0,3) + '-' + cleanedStr.substr(3,3) + '-' + cleanedStr.substr(6,inputLength-1);                          
                      }else if(inputLength>=10) {
                          formattedNumber= cleanedStr.substr(0,3) + '-' + cleanedStr.substr(3,3) + '-' + cleanedStr.substr(6,inputLength-1);                        
                      }
                      console.log(formattedNumber);
                      this.$('[name=mobilePhone]').val(formattedNumber);
            });

Cruz Nunez kodunu genişletmek ve sürekli biçimlendirme eklemek, ayrıca bazı uluslararası telefon numarası biçimlerini dahil etmek.

    $('#phone').on('input', function() {
      var number = $(this).val().replace(/[^\d]/g, '');
      if (number.length == 3) {
        number = number.replace(/(\d{3})/, "$1-");
      } else if (number.length == 4) {
        number = number.replace(/(\d{3})(\d{1})/, "$1-$2");
      } else if (number.length == 5) {
        number = number.replace(/(\d{3})(\d{2})/, "$1-$2");
      } else if (number.length == 6) {
        number = number.replace(/(\d{3})(\d{3})/, "$1-$2-");
      } else if (number.length == 7) {
        number = number.replace(/(\d{3})(\d{3})(\d{1})/, "$1-$2-$3");
      } else if (number.length == 8) {
        number = number.replace(/(\d{4})(\d{4})/, "$1-$2");
      } else if (number.length == 9) {
        number = number.replace(/(\d{3})(\d{3})(\d{3})/, "$1-$2-$3");
      } else if (number.length == 10) {
        number = number.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
      } else if (number.length == 11) {
        number = number.replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, "$1-$2-$3-$4");
      } else if (number.length == 12) {
        number = number.replace(/(\d{2})(\d{3})(\d{3})(\d{4})/, "$1-$2-$3-$4");
      }
      $(this).val(number);
    });

belki bu yardımcı olur

var countryCode = +91;
var phone=1234567890;
phone=phone.split('').reverse().join('');//0987654321
var formatPhone=phone.substring(0,4)+'-';//0987-
phone=phone.replace(phone.substring(0,4),'');//654321
while(phone.length>0){
formatPhone=formatPhone+phone.substring(0,3)+'-';
phone=phone.replace(phone.substring(0,3),'');
}
formatPhone=countryCode+formatPhone.split('').reverse().join('');

+ 91-123-456-7890 alacaksın