Форматирование числового поля INPUT (javaScript)

Автор: Роман Чернышов Опубликовано: 21 сентября 2011

В рамках очередной заметки, публикую этот пост, о том как отформатировать HTML поле INPUT с введенным в него значением стоимости (числа с кучей нолей). Для чего это нужно? В первую и основную очередь это повышает юзабилити заполняемой формы и всего сайта. Представьте если пользователю приходится заполнять числами (цена, площадь) множество полей, и во всех полях что-то вида: 10000000 или 150000000 — какое это число? — согласитесь, без разбора на отдельные части, бегая глазами по нулям, расставляя пробелы в уме — непонятно… Куда было бы лучше, если заполненные поля имели бы вид: 10 000 000 и 150 000 000 соответственно.

Для решения этой простой задачи можно воспользоваться следующей JavaScript функцией:

Просмотр кода JAVASCRIPT

function clear_value(obj_id, event) {
	code = (event.charCode) ? event.charCode : event.keyCode;
	if(code != 9 && code != 16){
		document.getElementById(obj_id).value = '';
	}
}
 
 
function format_price(e) {
	var target = e.target || e.srcElement;
 
	var cursorPos = get_cursor_position(target);
	if (cursorPos == -1) { cursorPos = 0; }
	var deltaPos = 0;
 
	var lengthBefore = target.value.length;
	target.value = target.value.replace(/\s+/g,'').replace(/\s+$/, '');
	target.value = format_num(target.value);
	if (!deltaPos && (target.value.length - lengthBefore) > 0) { deltaPos = target.value.length - lengthBefore; }
	if (!deltaPos && target.value[ cursorPos + deltaPos ] == ' ' && target.value[ cursorPos + deltaPos - 1 ] == ' ') { deltaPos += 2; }
	set_cursor_position(target, cursorPos + deltaPos);
	return true;
}
 
 
function get_cursor_position(inputEl) {
	if (document.selection && document.selection.createRange) {
		var range = document.selection.createRange().duplicate();
		if (range.parentElement() == inputEl) {
			range.moveStart('textedit', -1);
			return range.text.length;
		}
	} 
	else if (inputEl.selectionEnd) { return inputEl.selectionEnd; }
	else
		return -1;
}
 
 
function set_cursor_position(inputEl, position) {
	if (inputEl.setSelectionRange) {
		inputEl.focus();
		inputEl.setSelectionRange(position, position);
	}
	else if (inputEl.createTextRange) {
		var range = inputEl.createTextRange();
		range.collapse(true);
		range.moveEnd('character', position);
		range.moveStart('character', position);
		range.select();
	}
}
 
 
function format_num(str) {
	var retstr = '';
	var now = 0;
	for (i = str.length - 1; i >= 0; i--) {
		if (now < 3) {
			now++;
			retstr = str.charAt(i) + retstr;
		} else {
			now = 1;
			retstr = str.charAt(i) + ' ' + retstr;
		}
	}
	return retstr;
}

Код HTML при этом будет выглядеть следующим образом:

Просмотр кода HTML

<form>
<input onkeyup="format_price(event)" name="full_price" size="20" type="text" />
</form>

Как видите, при каждом нажатии клавиши, вызывается функция format_price(event), с передачей ей текущего значения поля. Затем функция обрабатывает значение, расставляя пробелы там где это необходимо и возвращает отформатированное число обратно в поле.

Внимания! Переданные таким образом значение следует отчищать от пробелов в них. Если вы принимаете данные формы скриптом PHP, то полученное значение обрабатываем следующим образом:

Просмотр кода PHP

$full_price=intval(str_replace(' ','',$_POST['full_price']));
 // удаляем все  пробелы и преобразуем полученное значение в INT

Такой метод форматирования работает во всех современных браузерах, а также без проблем работает в IE6 и ему подобных) (на более ранних версиях тестирование не проводилось).

Надеюсь кому-то пригодятся, если будут вопросы или предложения по улучшению функции то пишите в комментариях, не стесняйтесь)

JavaScript / jQuery Tags

форматирование input

1 Comment to “Форматирование числового поля INPUT (javaScript)”

Олег 06.12.2013 в 10:56 дп
Почему то не хочет работать, вернее внешне все форматирует, но при передаче через форму в код не запоминается
Каждую веденную цифру я обрабатываю так:
$summa_kredita=trim($_REQUEST[«summa_kredita»]);
$summa_kredita=stripslashes($summa_kredita);
$summa_kredita=str_replace(«,»,».»,$summa_kredita);
$summa_kredita=floatval($summa_kredita);
почему то думаю что где то конфликтует с $full_price=intval(str_replace(‘ ‘,»,$_POST[‘full_price’]));, не подскажите???
Ответить