Небольшой урок о том, как в jQuery плагине Masked Input Plugin убрать автоматическое стирание не до конца введенной информации в поле форм по маске ввода.


Стандартное поведение маски ввода в поле формы

В интернете гуляет замечательный плагин, который позволяет задавать маску ввода в поля форм на свой вкус.

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

По умолчанию, при задании маски ввода, форма работает следующим образом:

Если ввести в поле цифры, но заполнив маску не до конца, то при клике вне поля введенные данные сотрутся и пользователю придется вводить все заново.


Маска ввода без автоматического удаления информации

Я посмотрел на плагин изнутри и нашел способ, как это исправить. Становится возможным продолжать вбивать информацию в маску, после focusout.

Теперь форма работает вот таким образом:


Решение

Суть находится в файле плагина  в функции checkVal(). Найдите следующий кусок кода:

function checkVal(allow) {

Далее, в этой функции необходимо найти условие:

if (allow) {
	writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
	input.val("");
	clearBuffer(0, len);
} else {
	writeBuffer();
	input.val(input.val().substring(0, lastMatch + 1));
}

Это примерно 275 строка кода.

Все, что нам остается сделать, чтобы плагин не удалял введенные данные в поле формы, при условии, что маска введена не полностью, это удалить или закомментировать строки:

input.val("");
clearBuffer(0, len);

Получается, что мы не удаляем данные, если количество знаков меньше, чем количество знаков в маске.

if (allow) {
	writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
	//input.val(""); 
	//clearBuffer(0, len);
} else {
	writeBuffer();
	input.val(input.val().substring(0, lastMatch + 1));
}

Версия плагина 1.3.1. Подробнее про работу плагина Masked Input на сайте разработчика.