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

Author Роман Чернышов    Category JavaScript / jQuery     Tags Комментариев 1 Дата 21 Сен

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

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

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

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы

www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...