วิธีจัดรูปแบบหมายเลขโทรศัพท์ด้วย jQuery

ฉันกำลังแสดงหมายเลขโทรศัพท์เช่น2124771000. 212-477-1000แต่ผมต้องใช้หมายเลขที่จะจัดรูปแบบในรูปที่มนุษย์สามารถอ่านได้มากขึ้นตัวอย่างเช่น: นี่คือปัจจุบันของฉันHTML:

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

ง่ายๆ: http://jsfiddle.net/Xxk3F/3/

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

หรือ: 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');
});

หมายเหตุ: ไม่สามารถใช้เมธอด. text () กับองค์ประกอบอินพุตได้ สำหรับข้อความในช่องใส่ให้ใช้เมธอด .val ()

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

อย่าลืมตรวจสอบให้แน่ใจว่าคุณกำลังทำงานกับจำนวนเต็ม

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;
});

นี่คือคำตอบบางส่วนรวมกัน สามารถใช้สำหรับช่องป้อนข้อมูล เกี่ยวข้องกับหมายเลขโทรศัพท์ที่มีความยาว 7 และ 10 หลัก

// 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)
  });
}

ตัวอย่างสด: JSFiddle

ฉันรู้ว่านี่ไม่ได้ตอบคำถามโดยตรง แต่เมื่อฉันค้นหาคำตอบนี่เป็นหนึ่งในหน้าแรกที่ฉันพบ ดังนั้นคำตอบนี้มีไว้สำหรับทุกคนที่ค้นหาสิ่งที่คล้ายกับสิ่งที่ฉันกำลังค้นหา

ใช้ห้องสมุดเพื่อจัดการหมายเลขโทรศัพท์ Libphonenumberโดย Google เป็นทางออกที่ดีที่สุดของคุณ

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

ฉันแนะนำให้ใช้แพ็คเกจนี้โดย seegno

ฉันได้ให้ลิงก์ jsfiddle เพื่อให้คุณจัดรูปแบบหมายเลขโทรศัพท์ในสหรัฐอเมริกาเป็น (XXX) XXX-XXX

 $('.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('');
  }
});

ตัวอย่างสด: JSFiddle

ลองของตามนี้ ..

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
    }
  }
});

พิจารณา libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ) ซึ่งเป็นรุ่นที่เล็กกว่าของ libphonenumber เต็มรูปแบบและมีชื่อเสียง

ตัวอย่างรวดเร็วและสกปรก:

$(".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);
}
});

(หากคุณใช้ regex เพื่อหลีกเลี่ยงการดาวน์โหลดไลบรารีให้หลีกเลี่ยงการฟอร์แมตใหม่ใน backspace / delete จะทำให้แก้ไขการพิมพ์ผิดได้ง่ายขึ้น)

ทางเลือกอื่น:

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

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

ฉันพบคำถามนี้ในขณะที่ googling หาวิธีจัดรูปแบบหมายเลขโทรศัพท์อัตโนมัติผ่านปลั๊กอิน jQuery คำตอบที่ยอมรับนั้นไม่เหมาะกับความต้องการของฉันและเกิดขึ้นมากมายในช่วง 6 ปีนับตั้งแต่มีการโพสต์ครั้งแรก ในที่สุดฉันก็พบวิธีแก้ปัญหาและกำลังบันทึกไว้ที่นี่สำหรับลูกหลาน

ปัญหา

ฉันต้องการให้ช่องป้อน html หมายเลขโทรศัพท์ของฉันจัดรูปแบบอัตโนมัติ (ปิดบัง) ค่าตามประเภทผู้ใช้

วิธีการแก้

ตรวจสอบCleave.js เป็นวิธีที่มีประสิทธิภาพ / ยืดหยุ่นและง่ายในการแก้ปัญหานี้และปัญหาการปิดบังข้อมูลอื่น ๆ อีกมากมาย

การจัดรูปแบบหมายเลขโทรศัพท์ทำได้ง่ายเพียง:

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

อินพุต:

4546644645

รหัส:

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

เอาท์พุท:

(454)664-4645

ม้วนรหัสของคุณเองอย่างรวดเร็ว:

นี่คือโซลูชันที่แก้ไขจากโซลูชันของ Cruz Nunezด้านบน

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

• ในโซลูชันนี้การจัดรูปแบบจะถูกนำไปใช้ไม่ว่าผู้ใช้จะป้อนตัวเลขกี่หลักก็ตาม (ในโซลูชันของ Nunes การจัดรูปแบบจะใช้เฉพาะเมื่อป้อนตัวเลข 7 หรือ 10 หลักเท่านั้น)

• ต้องใช้รหัสไปรษณีย์เพื่อป้อนหมายเลขโทรศัพท์ 10 หลักของสหรัฐอเมริกา

• อย่างไรก็ตามวิธีแก้ปัญหาทั้งสองวิธีการแก้ไขตัวเลขที่ป้อนแล้วเป็นปัญหาเนื่องจากตัวเลขที่พิมพ์จะถูกเพิ่มไว้ที่ส่วนท้ายเสมอ

• ฉันขอแนะนำแทนโค้ด jQuery Mask Plugin ที่มีประสิทธิภาพดังที่กล่าวถึงด้านล่าง:

แนะนำ jQuery Mask Plugin

ผมขอแนะนำให้ใช้jQuery หน้ากากปลั๊กอิน (หน้ามีตัวอย่างสด) บน GitHub
ลิงก์เหล่านี้มีคำอธิบายเล็กน้อยเกี่ยวกับวิธีใช้:

• 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
แทนที่จะติดตั้ง / โฮสต์โค้ดคุณยังสามารถเพิ่มลิงค์ไปยัง CDN ของสคริปต์ CDN Link สำหรับ jQuery Mask Plugin
<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>

หรือ
<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 7: ใช้ปลั๊กอิน Masks Form Fields

หากคุณกำลังใช้ปลั๊กอิน Contact Form 7 บนไซต์ WordPress ตัวเลือกที่ง่ายที่สุดในการควบคุมฟิลด์แบบฟอร์มคือหากคุณสามารถเพิ่มคลาสลงในช่องป้อนข้อมูลของคุณเพื่อดูแลคุณได้
ปลั๊กอิน Masks Form Fieldsเป็นตัวเลือกหนึ่งที่ช่วยให้ทำได้ง่าย
ฉันชอบตัวเลือกนี้เนื่องจากภายในมันฝังโค้ดเวอร์ชันย่อส่วนจากjQuery Mask Pluginกล่าวถึงข้างต้น

ตัวอย่างการใช้งานในแบบฟอร์มติดต่อ 7:

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

class:phone_usส่วนที่สำคัญที่นี่คือ
โปรดทราบว่าหากคุณใช้minlength/ maxlengthความยาวจะต้องมีอักขระมาสก์นอกเหนือจากตัวเลข

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

เอาท์พุท :-( 123) 657-8963

ตัวจัดการเหตุการณ์ต่อไปนี้ควรทำตามความจำเป็น:

$('[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 และเพิ่มการจัดรูปแบบต่อเนื่องรวมถึงรูปแบบหมายเลขโทรศัพท์ระหว่างประเทศบางรูปแบบ

    $('#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);
    });

อาจจะช่วยได้

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