Форматирование числового поля 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’]));, не подскажите???

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

Консультации

Последние вопросы
Меню

Archive

Портфолио Все работы


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