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
이것이 질문에 직접적으로 답하지는 않는다는 것을 알지만, 답을 찾아보니 이것이 제가 찾은 첫 페이지 중 하나였습니다.그래서 이 답은 제가 찾던 것과 비슷한 것을 찾는 사람들을 위한 것입니다.
라이브러리를 사용하여 전화 번호를 처리합니다.구글의 립폰 번호가 당신의 최선책입니다.
// 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
저는 이 패키지를 segno로 사용하는 것을 추천합니다.
이런 걸 시도해 보세요.
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
}
}
});
미국 전화번호를 (XXX) XXX-XXX로 포맷할 수 있도록 jsfiddle link를 제공하였습니다.
$('.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
자신의 코드를 빠르게 롤:
여기 위의 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);
이 솔루션에서는 사용자가 몇 자리를 입력했든 간에 형식이 적용됩니다.(Nunes의 솔루션에서는 정확히 7자리 또는 10자리를 입력한 경우에만 포맷이 적용됩니다.)
10자리 미국 전화번호를 입력하려면 우편번호를 입력해야 합니다.
그러나 두 가지 해결책 모두 입력된 숫자를 편집하는 것은 문제가 있습니다. 입력된 숫자는 항상 끝에 추가되기 때문입니다.
대신 아래에 언급된 강력한 jQuery Mask Plugin 코드를 추천합니다.
jQuery 마스크 플러그인 추천
github에서 jQuery Mask Plugin(페이지에는 라이브 예제가 있음)을 사용하는 것을 추천합니다.
이러한 링크에는 사용 방법에 대한 최소한의 설명이 있습니다.
- 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 Link for jQuery Mask Plugin의 CDN에 링크를 추가할 수도 있습니다.
<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 플러그인 사용
WordPress 사이트에서 연락처 양식 7 플러그인을 사용하는 경우 양식 필드를 제어하는 가장 쉬운 옵션은 단순히 입력 필드에 클래스를 추가하여 처리할 수 있는 경우입니다.
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, 길이는 숫자 외에 마스크 문자를 포함해야 합니다.
libphone number-js (https://github.com/halt-hammerzeit/libphonenumber-js) 를 생각해 보세요. 이것은 전체적이고 유명한 libphone number의 작은 버전입니다.
빠르고 더러운 예:
$(".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를 사용하여 라이브러리 다운로드를 피할 경우 백스페이스에서 다시 포맷하지 마십시오./삭제하면 오타 수정이 쉬워집니다.)
대체 솔루션:
function numberWithSpaces(value, pattern) {
var i = 0,
phone = value.toString();
return pattern.replace(/#/g, _ => phone[i++]);
}
console.log(numberWithSpaces('2124771000', '###-###-####')); $(".phoneString").text(function(i, text) {
text = text.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
return text;
});
출력 :-(123) 657-8963
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
다음 이벤트 처리기에서 필요한 작업을 수행해야 합니다.
$('[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을 받으실 수 있습니다.
언급URL : https://stackoverflow.com/questions/8760070/how-to-format-a-phone-number-with-jquery
'source' 카테고리의 다른 글
| 두 jQuery 결과를 결합하는 방법 (0) | 2023.10.08 |
|---|---|
| xlib으로 스크린샷을 제대로 찍는 방법은? (0) | 2023.10.08 |
| 다른 조건이 있는 경우 도커 파일(외부 인수 포함) (0) | 2023.10.08 |
| Oracle Session이란? (0) | 2023.10.08 |
| ACF의 관련 게시물 수를 계산합니다. (0) | 2023.10.03 |