কীভাবে jQuery দিয়ে কোনও ফোন নম্বর ফর্ম্যাট করবেন

Question

আমি বর্তমানে ফোন নম্বর প্রদর্শন করছি 2124771000। যাইহোক, আমি নম্বর প্রয়োজন, আরো পাঠযোগ্য আকারে ফর্ম্যাট করা উদাহরণস্বরূপ: 212-477-1000। এখানে আমার বর্তমান HTML:

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

Comments

খুব দেরি উত্তর, কিন্তু সাহায্যের যারা এই পৃষ্ঠার URL এ অবতরণ জন্য: igorescobar.github.io/jQuery-Mask-Plugin

— Senthil

নিশ্চিত নয় যে আমি এটির বদ্ধ স্থিতিটি বুঝি। কনস্ট্রাকটিভ নয় ঠিক বলে মনে হচ্ছে না ... আমি এই তথ্যটি অত্যন্ত দরকারী এবং যে সমস্যাটি আমাকে এখানে এনেছে তার একটি প্রত্যক্ষ সংযুক্তি পাই। এটি বন্ধ হওয়ার সত্যতা নিয়ে আমি প্রতিদ্বন্দ্বিতা করি না, তবে বন্ধ হওয়ার জন্য প্রদর্শিত কারণ

— ব্রেট ওয়েবার

সম্ভবত প্রশ্নটি সম্পাদিত হয়েছে এবং এর আগে এটি বর্ণনামূলক কম ছিল ... এটি আমার কাছে একটি নিখুঁত বৈধ এসও প্রশ্ন এবং উত্তর এবং প্রচুর উপকারের মতো বলে মনে হচ্ছে।

— কেভিন নেলসন

গুগলস লাইব্রেরি github.com/googlei18n/libphonenumber কোনও jQuery প্রয়োজন।

— নিউ এভারেস্ট

Answer 1

সহজ: 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 () পদ্ধতিটি ব্যবহার করুন।

Comments

আমি ইনপুট ক্ষেত্রগুলির মধ্যে 'পরিবর্তন' ইভেন্টগুলিকে সমর্থন করার জন্য এটি পরিবর্তন করেছি। jsfiddle.net/gUsUK

— Zach শালবেটার

/(\d{3})?(\d{3})(\d{4})$/কোনও

— রেজেক্সের আরও কিছুটা দৃust়তর

এটি কি সারা বিশ্বে ফোন নম্বরগুলির জন্য বৈধ?

— রামপ্রসাদবিসিল

পৃষ্ঠায় আপনার একাধিক ফোন নম্বর থাকলে mas (নির্বাচক) .ইচ () ফাংশনটি সহজেই সমস্ত সংখ্যায় এই মাস্কটি প্রয়োগ করার জন্য বিবেচনা করুন।

— ড্যানিয়েল সিবার্ট

আমি এটিকে কীপ্রেস এবং অস্পষ্ট ইভেন্টের সাথে বাস্তবায়ন করতে চাই। : এটা ফোন নম্বর বিন্যাস না যখন ডিজিটের কম 10. নমুনা কোড হয় $('#x_phone').on('keypress blur',function() { var ph = $(this).val(); var temp = ph.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3'); $(this).val(temp); //alert(temp); });

— Musaddiq খান

Answer 2

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

Comments

@ অ্যান্ড্রিয়াসাল: কারণ একটি রেজেক্স ইঞ্জিনের ভারী ওভারহেড রয়েছে, বিশেষত এমন কোনও কিছুর জন্য যেখানে ইনপুট ফর্ম্যাটটি পরিচিত এবং সাধারণ স্ট্রিং অপারেশনগুলি আরও বেশি দক্ষ। এবং অবশ্যই, এখানে নিয়ম রয়েছে যে কোনও সমস্যার জন্য একটি রেজেেক্স ব্যবহার করা আপনাকে কেবল দুটি সমস্যা তৈরি করে।

— মার্ক বি

এই সমাধানটি "212555IDEA" এর মতো অক্ষরগুলির সাথে ফোন নম্বরগুলিও যথাযথভাবে ফর্ম্যাট করে।

— জেসন হোয়াইটহর্ন

এটি উইন্ডোজের পরিবেশে ভাল কাজ করছে তবে আইওএস ডিভাইসে কাজ করছে না। কোনও বিকল্প আছে যা উভয় প্ল্যাটফর্মে কাজ করে

— পুরুষোত্তম শর্মা

Answer 3

আপনি খাঁটি পূর্ণসংখ্যার সাথে কাজ করছেন তা নিশ্চিত করতে ভুলবেন না।

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

Answer 4

এই উত্তরগুলির একটি সংমিশ্রণ এখানে। এটি ইনপুট ক্ষেত্রগুলির জন্য ব্যবহার করা যেতে পারে। 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)
  });
}

সরাসরি উদাহরণ: জেএসফিডাল

আমি জানি এটি সরাসরি প্রশ্নের উত্তর দেয় না, তবে যখন আমি উত্তরগুলি খুঁজছিলাম তখন এটি আমার প্রথম পৃষ্ঠাগুলির মধ্যে একটি ছিল। সুতরাং এই উত্তরটি যার জন্য আমি অনুসন্ধান করছিলাম তার অনুরূপ কিছু অনুসন্ধান করছে।

Answer 5

ফোন নম্বর হ্যান্ডেল করতে একটি লাইব্রেরি ব্যবহার করুন। গুগলের লিবিফোনেনবার আপনার সেরা বাজি bet

// 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));
// => [phone]

আমি এই প্যাকেজটি সিগনো দ্বারা ব্যবহার করার পরামর্শ দিচ্ছি।

Answer 6

ইউএস ফোন নম্বরগুলিকে (এক্সএক্সএল) এক্সএক্সএলএক্সএক্সএক্স হিসাবে ফর্ম্যাট করার জন্য আমি জেফফিল লিঙ্ক সরবরাহ করেছি

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

সরাসরি উদাহরণ: জেএসফিডাল

Comments

বাম থেকে ডানে যেমন সংখ্যাটি দেখানোর জন্য আমি এই প্যাটার্নটি কীভাবে পরিবর্তন করতে পারি ==> [phone]

— মোস্তফা

Answer 7

এরকম কিছু চেষ্টা করে দেখুন ..

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

Answer 8

Libphonenumber-js ( https://github.com/halt-hammerzeit/libphonenumber-js ) বিবেচনা করুন যা সম্পূর্ণ এবং বিখ্যাত লাইবফোনেম্বরের একটি ছোট সংস্করণ।

দ্রুত এবং নোংরা উদাহরণ:

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

(আপনি যদি একটি লাইব্রেরি ডাউনলোড এড়ানোর জন্য কোনও রেজেক্স ব্যবহার করেন তবে ব্যাকস্পেসে পুনরায় ফর্ম্যাট এড়ানো / মুছুন টাইপগুলি সংশোধন করা আরও সহজ করে দেবে))

Answer 9

একটি বিকল্প সমাধান:

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

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

Answer 10

JQuery প্লাগইনটির মাধ্যমে ফোন নম্বরগুলি অটো-ফর্ম্যাট করার উপায়ের জন্য গুগল করার সময় আমি এই প্রশ্নটি পেয়েছি। গৃহীত উত্তরটি আমার প্রয়োজনের জন্য আদর্শ ছিল না এবং মূলত পোস্ট হওয়ার পরে years বছরে অনেক কিছু ঘটেছে। আমি শেষ পর্যন্ত সমাধানটি খুঁজে পেয়েছি এবং এটি উত্তরসূরির জন্য এখানে ডকুমেন্ট করছি।

সমস্যা

আমি আমার ফোন নম্বরটি এইচটিএমএল ইনপুট ফিল্ডটি ব্যবহারকারী ধরণের হিসাবে অটো-ফর্ম্যাট (মাস্ক) করতে চাই।

সমাধান

পরীক্ষা করে দেখুন Cleave.js । এই সমস্যাটি সমাধান করার এটি একটি খুব শক্তিশালী / নমনীয় এবং সহজ উপায় এবং অন্যান্য অনেক ডেটা মাস্কিংয়ের সমস্যা।

একটি ফোন নম্বর ফর্ম্যাট করা যেমন সহজ:

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

Answer 11

ইনপুট:

4546644645

কোড:

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

আউটপুট:

[phone]

Answer 12

দ্রুত আপনার নিজস্ব কোড রোল করুন:

উপরে ক্রুজ নুনজের সমাধান থেকে সংশোধিত একটি সমাধান এখানে দেওয়া হল ।

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

জেএসফিডাল

• এই সমাধানটিতে, ব্যবহারকারী কতগুলি সংখ্যা প্রবেশ করিয়ে দেয় না কেন বিন্যাস প্রয়োগ করা হয়। (নুনসের সমাধানে, ফর্ম্যাটিংটি তখনই প্রয়োগ করা হয় যখন ঠিক 7 বা 10 ডিজিট প্রবেশ করা হয়))

• 10-সংখ্যার মার্কিন ফোন নম্বর প্রবেশ করানোর জন্য এটির জন্য জিপ কোড প্রয়োজন।

• উভয় সমাধান, তবে ইতিমধ্যে প্রবেশ করা অঙ্কগুলি সম্পাদনা করা সমস্যাযুক্ত, কারণ টাইপ করা অঙ্কগুলি সর্বদা শেষের দিকে যুক্ত হয়।

• আমি পরিবর্তে, নীচে উল্লিখিত শক্তিশালী jQuery মাস্ক প্লাগিন কোডটি সুপারিশ করছি:

JQuery মাস্ক প্লাগইন সুপারিশ

আমি ব্যবহার সুপারিশ 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/

সিডিএন
কোড ইনস্টল / হোস্টিংয়ের পরিবর্তে, আপনি jQuery মাস্ক প্লাগইনটির জন্য স্ক্রিপ্টের সিডিএন লিঙ্কের একটি লিঙ্ক যুক্ত করতে পারেন
<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>

ওয়ার্ডপ্রেস যোগাযোগ ফর্ম 7: মাস্কস ফর্ম ফিল্ডস প্লাগইন ব্যবহার করুন

আপনি যদি কোনও ওয়ার্ডপ্রেস সাইটে যোগাযোগ ফর্ম plugin প্লাগইন ব্যবহার করছেন তবে ফর্ম ক্ষেত্রগুলি নিয়ন্ত্রণ করার সবচেয়ে সহজ বিকল্পটি যদি আপনি কেবল আপনার ইনপুট ক্ষেত্রে এটির যত্ন নিতে কোনও ক্লাস যুক্ত করতে পারেন।
মাস্কস ফর্ম ফিল্ডস প্লাগইন হ'ল একটি বিকল্প যা এটি করা সহজ করে তোলে।
আমি এই বিকল্পটি পছন্দ করি, যেমন অভ্যন্তরীণভাবে এটি উপরে উল্লিখিত jQuery মাস্ক প্লাগইন থেকে কোডের একটি ছোট সংস্করণ এম্বেড করে ।

একটি পরিচিতি ফর্ম 7 ফর্ম ব্যবহারের উদাহরণ:

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

এখানে গুরুত্বপূর্ণ অংশটি হ'ল class:phone_us।
মনে রাখবেন যে আপনি minlength/ ব্যবহার করলে maxlength, দৈর্ঘ্যে অবশ্যই অঙ্কগুলি ছাড়াও মুখোশ অক্ষর অন্তর্ভুক্ত থাকে।

Answer 13

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

আউটপুট :-( 123) 657-8963

Answer 14

নিম্নলিখিত ইভেন্ট হ্যান্ডলারটি প্রয়োজনীয় কাজটি করা উচিত:

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

Answer 15

ক্রুজ নুনেজ কোডটি প্রসারিত করতে এবং ক্রমাগত বিন্যাস যুক্ত করতে কিছু আন্তর্জাতিক ফোন নম্বর ফর্ম্যাট অন্তর্ভুক্ত করুন।

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

Answer 16

এই সাহায্য করবে হতে পারে

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 পাবেন