Форматирование поля INPUT

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

3456789

На просторах  интернета  очень непросто было найти что-то по этой теме, но я  все таки нашла один скрипт который идеально подходит  для этого решения.

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>


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

Код PHP:

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

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

Добавить комментарий