11.03.2012, 04:24
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Форматирование вводимого номера + 7 123 456-78-90
Хочу сделать чтобы при вписывании номера в input происходило вот такое незамысловатое форматирование.
Пока даже не знаю с чего начать. Я понимаю что тут нужно использовать регулярку и прослушивать события keypress, change.
Но как все совместить, не пойму. Может кто уже делал подобную штуку?
Впринципе важно чтобы все работало при вручном вводе номера, корректная работа backspace. На вставку из буфера можно забить - врядли кто-то будет этим пользоваться.
|
|
11.03.2012, 05:11
|
 |
Профессор
|
|
Регистрация: 04.12.2009
Сообщений: 579
|
|
|
по кейпрессу вызываешь функцию, которая сразу ставит плюс и пробел, дальше проверяет позицию каретки (курсора). если 3 (плюс уже занимает первое место, пробел — второе) — к значению поля (value) добавляешь ещё один пробел, если 7 — тоже самое (добавляешь пробел), если 11 — добавляешь дефис, и если 14 — тоже дефис.
__________________
С моих слов записано верно.
|
|
11.03.2012, 06:55
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
var numbers = [
"+71234567890",
"1234567890",
"234567890",
"34567890",
"4567890",
"567890",
"67890",
"7890",
"890",
"90",
"0"
]
var re = /(?:([\d]{1,}?))??(?:([\d]{1,3}?))??(?:([\d]{1,3}?))??(?:([\d]{2}))??([\d]{2})$/;
for( var i = 0; i < numbers.length; i++ ) {
var formatted = numbers[ i ].replace( re, function( all, a, b, c, d, e ){
return ( a ? a + " " : "" ) + ( b ? b + " " : "" ) + ( c ? c + "-" : "" ) + ( d ? d + "-" : "" ) + e;
});
alert( formatted );
}
Последний раз редактировалось devote, 11.03.2012 в 07:32.
|
|
11.03.2012, 07:21
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
Чушь конечно получилась, ну и фиг с ним 
<input type="text" onkeyup="handler( this )" oninput="handler( this )" onblur="handler( this )" />
<script>
var re = /(?:([\d]{1,}?))??(?:([\d]{1,3}?))??(?:([\d]{1,3}?))??(?:([\d]{2}))??([\d]{2})$/;
function handler( elem ) {
elem.value = elem.value.replace( /[^0-9]/g, '' ).replace( re, function( all, a, b, c, d, e ){
return ( a ? "+ " + a + " " : "" ) + ( b ? b + " " : "" ) + ( c ? c + "-" : "" ) + ( d ? d + "-" : "" ) + e;
});
}
</script>
Последний раз редактировалось devote, 11.03.2012 в 07:31.
|
|
11.03.2012, 11:05
|
 |
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
еще вариант
<input type="text" onkeyup="formattingNumbers( this )">
<script>
function formattingNumbers( elem ) {
var num = elem.value.replace( /\D/g, '' ).split( /(?=.)/ ), i = num.length - 1;
if ( 0 <= i ) num.unshift( '+ ' );
if ( 1 <= i ) num.splice( 2, 0, ' ' );
if ( 4 <= i ) num.splice( 6, 0, ' ' );
if ( 7 <= i ) num.splice( 10, 0, '-' );
if ( 9 <= i ) num.splice( 13, 0, '-' );
elem.value = num.join( '' );
}
</script>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
11.03.2012, 15:18
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Вариант ...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" onkeyup="formattingNumbers( this )" value="+ 7 ">
<script>
function formattingNumbers(b) {
var a = "+ 7 123 456-78-90",
c = b.value.match(/\d/g);
if(!c) return b.value = "+ 7 ";
a = a.replace(/\d/g, function () {
return c.shift() || "#"
});
b.value = a.replace(/#.*/, "")
};</script>
</body>
</html>
Последний раз редактировалось рони, 11.03.2012 в 15:27.
|
|
11.03.2012, 17:17
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Благодарю всех.
У devote форматирование идет как то с конца, вводить номер неудобно. Зато можно ввести международный номер с кодом страны боьше чем из одной цифры  . Но мне это не нужно.
У рони нельзя удалить ошибочноо введенные цифры (
Самый адекватный вариант у nerv'а , осталось только ограничение сделать. |
|
11.03.2012, 18:02
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
А что вот это такое? 'string'.split( /(?=.)/ ) - это такой способ преобразования строки в массив?
Кстати чтобы заработал бэкспейс в вариант от рони, достаточно использовать такую регулярку
b.value = a.replace(/(\ |-)#.*/, "")
|
|
11.03.2012, 21:07
|
|
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
danik.js, да не, рони нормальный вариант предложил, за что ему плюс в карму Хотя, может быть в моем меньше замен/манипуляций производится, но в оптимизации сложнее.
Еще такой вариант на его основе
<input type="text" onkeyup="formattingNumbers( this )" value="+ 7 123 456-78-90">
<script>
function formattingNumbers( elem ) {
var pattern = '+ 7 123 456-78-90', arr = elem.value.match( /\d/g ), i = 0;
if ( arr === null ) return;
elem.value = pattern.replace( /\d/g, function( a, b ) {
if ( arr.length ) i = b + 1;
return arr.shift();
}).substring( 0, i );
}
</script>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Последний раз редактировалось nerv_, 11.03.2012 в 21:09.
|
|
11.03.2012, 21:13
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Как то понравился ваш вариант, nerv, хотя у рони задать паттерн можно. Вобщем вроде бы разобрался в обоих способах, особой разницы для меня нет что использовать.
Вопрос такой: сложно ли сделать чтоб контролировалась вставка из буфера?
Выложу окончательный вариант, вдруг кому понадобится (jQuery) :
$.fn.formatPnoneNumber = function(){
return this.each(function(){
$(this).bind('keyup', function(){
var num = this.value.replace( '+ 7' , '' ).replace( /\D/g, '' ).split( /(?=.)/ ), i = num.length;
if ( 0 <= i ) num.unshift( '+ 7' );
if ( 1 <= i ) num.splice( 1, 0, ' ' );
if ( 4 <= i ) num.splice( 5, 0, ' ' );
if ( 7 <= i ) num.splice( 9, 0, '-' );
if ( 9 <= i ) num.splice( 12, 0, '-' );
if ( 11 <= i ) num.splice( 15, num.length - 15 );
this.value = num.join( '' );
});
});
};
Последний раз редактировалось danik.js, 11.03.2012 в 21:21.
|
|
|
|
