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

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

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

Для решения этой простой задачи можно воспользоваться следующей 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 при этом будет выглядеть следующим образом:

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

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

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

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

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

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

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’]));, не подскажите???

Оставить комментарий на Олег

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка