Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как форматировать в input ценовую информацию? (https://javascript.ru/forum/dom-window/23283-kak-formatirovat-v-input-cenovuyu-informaciyu.html)

mistermandarin 19.11.2011 00:24

Как форматировать в input ценовую информацию?
 
Весь инет облазил. Никак не могу найти. Пожалуйста подскажите - как при вводе цены в поле input сделать так, чтобы оно динамически форматировало данные по три знака с пробелом.
Например: при вводе 940000000 сразу форматировало на 940 000 000.
Буду крайне признателен за информацию. Заранее спасибо.

trikadin 19.11.2011 00:33

<input id="inp">
<script>
input= document.getElementById("inp");
input.onkeyup = input.onchange= input.onpaste= function(){
 this.value= this.value.replace(/[^\d]/g, "").replace(/\d{3}(?!$|(?:\s$))/g, "$& ");
};
</script>


P. S. Вообще, нужно ограничить нажатия всех клавиш, кроме цифр (ну и стрелок там, шифтов и т.д.)

mistermandarin 19.11.2011 00:41

Уважаемый trikadin, большое спасибо за ответ. Единственный момент. Так как это именно финансовая информация, то форматирование должно автоматически идти с права налево по три символа и пробел.
А именно, цифра из четырех символов это 9 400; при добавление еще одной цифры форматироваться в 94 000; еще одной в 940 000 и т.д.
Буду очень признателен за совет.

Nekromancer 19.11.2011 00:54

<input id="input">
<script>(function(){
	var handler = function(data){
		return data.split(/(\d{3})/).join(' ').replace(/\s+/g, ' ').replace(/^\s+/, '').replace(/\s+$/, '');
	}, lastValue = '', input = document.getElementById('input');
	if(input.addEventListener)input.addEventListener('input', function(){
		this.value = handler(this.value);
	}, false);
	else if(input.attachEvent) input.attachEvent('onpropertychange', function(){
		if(window.event.propertyName == 'value' && window.event.propertyName != lastValue){
			this.value = lastValue = handler(this.value);
		}
	});
}());</script>


Где то так.
Что то кривая регулярка вышла %)

trikadin 19.11.2011 01:04

mistermandarin, а, ну да, тупанул. Nekromancer, при всём уважении, код глючит.

Сейчас подумаю...

mistermandarin 19.11.2011 01:10

Уважаемый trikadin, скрипт, к сожалению, перестал работать. Не могли бы его подшаманить? Спасибо.

Nekromancer 19.11.2011 01:11

trikadin,
Да, я заметил. Уже нет вроде.

mistermandarin 19.11.2011 01:24

Уважаемый Nekromancer, все же можно как то настроить скрипт именно на финансовые данные. Смысл в том, что бы пробел ставился после каждой третьей цифры справа! А в Вашем варианте получается при вводе цифры 1233, форматирование в 123 3, тогда как хотелось бы 1 233. В любом случае спасибо за то, что откликнулись. :)

trikadin 19.11.2011 01:33

Ничего умнее в голову мне не пришло...

<input id="inp">
<script>
(function(){
var prev_value="";
var input= document.getElementById("inp");
input.onkeyup = input.onchange= input.onpaste= function(){
 this.value= this.value.replace(/[^\d\s]/g, "");
 if (prev_value==this.value)// отслеживаем изменение значения
  return;
 prev_value= this.value;
 this.value= this.value.replace(/[^\d]/g, "").split("").reverse().join("").replace(/\d{3}(?!$|(?:\s$))/g, "$& ").split("").reverse().join(""); // Уууу, цепочки!..
};
})();
</script>


Всё. Окончательный мой вариант))

mistermandarin 19.11.2011 01:35

Уважаемый trikadin. ТО ЧТО НАДО. Огромное человеческое СПАСИБО:thanks: !!!

Nekromancer 19.11.2011 01:43

trikadin,
я тоже приблизительно к этому пришёл) Правда если зажимать цифру, то оно всё равно глючит :)

trikadin 19.11.2011 01:51

Цитата:

Сообщение от Nekromancer
Правда если зажимать цифру, то оно всё равно глючит

Ну по-хорошему, там нужно сделать ограничение на скорость ввода... Ресурсов эта операция много жрёт, конечно...

И вообще много всяких проверок нужно приделать - но это уже его проблемы, я показал идею) Мавр сделал своё дело...

trikadin 19.11.2011 01:53

И вообще, финансовые данные больше четырёх цифр вводятся обычно НУ ОЧЕНЬ осмысленно и вдумчиво. :D

Так что риска мало.

Nekromancer 19.11.2011 02:03

Ага, даёшь и на сервере кривые скрипты при работе с финансовыми операциями ))

trikadin 19.11.2011 02:05

Цитата:

Сообщение от Nekromancer
Ага, даёшь и на сервере кривые скрипты при работе с финансовыми операциями ))

Даёшь биллионный долг пользователя компании или компании пользователю. Даёшь анархию)

рони 19.11.2011 02:47

Вариант регулярки ...
var a = "123 45 6775 8" 
 a = a.replace(/\s+/g, "").match(/(\d{1,3})(?=((\d{3})*([^\d]|$)))/g).join(" ")   
alert(a)

trikadin 19.11.2011 02:47

Цитата:

Сообщение от Nekromancer
Правда если зажимать цифру, то оно всё равно глючит

Стоп, Nekromancer, я тут подумал, посмотрел... А что, собственно, глючит? Код выполняется только по отпусканию клавиши? Так это by design...

trikadin 19.11.2011 02:47

рони, что-то напутали...

Уже всё ок) Прикольно. Но не факт, что быстрее)

Nekromancer 19.11.2011 03:05

trikadin, да, работает. Если поизвращаться, то всё можно конечно сделать красиво. Но опять же, тормозить будет.

trikadin 19.11.2011 03:13

Цитата:

Сообщение от Nekromancer
Если поизвращаться, то всё можно конечно сделать красиво. Но опять же, тормозить будет.

Ну это как всегда - либо дёшево и сердито, либо красиво, но с тормозами и извратом... :D

Kolyaj 21.11.2011 16:54

http://javascript.ru/forum/project/3...probelami.html

qwe88 04.05.2015 14:10

Цитата:

Сообщение от рони (Сообщение 137578)
Вариант регулярки ...
var a = "123 45 6775 8" 
 a = a.replace(/\s+/g, "").match(/(\d{1,3})(?=((\d{3})*([^\d]|$)))/g).join(" ")   
alert(a)

Супер!
Подскажите, пожалуйста, у меня есть инпут, в котором работает пробел при изменении. А как сделать пробел сразу при загрузке страницы?
<input type="text" value="3432424" id="cif" />

<script>

var input = document.getElementById("cif");
input.onkeyup = input.onchange= input.onpaste = function(){
 this.value= this.value.replace(/\s+/g, "").match(/(\d{1,3})(?=((\d{3})*([^\d]|$)))/g).join(" ");
};

</script>

qwe88 04.05.2015 14:35

У меня получилось так:
<body onload="ly()">
<input type="text" value="3432424" id="cif" />

<script>

var input = document.getElementById("cif");
input.onkeyup = input.onchange= input.onpaste = function(){
 this.value= this.value.replace(/\s+/g, "").match(/(\d{1,3})(?=((\d{3})*([^\d]|$)))/g).join(" ");
};

function ly(){
input.value = input.value.replace(/\s+/g, "").match(/(\d{1,3})(?=((\d{3})*([^\d]|$)))/g).join(" ");
}
</script>
</body>


Может есть более изящный способ :) ?

рони 04.05.2015 15:54

qwe88,
<body onload="input.onkeyup()">
<input type="text" value="3432424" id="cif" />
<script>
var input = document.getElementById("cif");
input.onkeyup = input.onchange= input.onpaste = function(){
 this.value= this.value.replace(/\s+/g, "").match(/(\d{1,3})(?=((\d{3})*([^\d]|$)))/g).join(" ");
};
</script></body>

trikadin 04.05.2015 16:23

Вот это некропост, лол.


Часовой пояс GMT +3, время: 20:20.