oncleared

Событие oncleared в библиотеке Inputmask вызывается в момент полного очищения значения поля ввода. Оно предназначено для обработки ситуаций, когда маска была сброшена пользователем вручную либо очищена программно.

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

Назначение oncleared

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

  • удалил номер телефона;
  • стер дату;
  • очистил банковские реквизиты;
  • сбросил email;
  • удалил значение маскированного идентификатора.

Стандартные DOM-события (input, change, keyup) не всегда позволяют удобно определить именно факт полного очищения маски. oncleared решает эту задачу напрямую.

Базовый синтаксис

Inputmask({
    oncleared: function () {
        console.log("Поле очищено");
    }
}).mask("#phone");

После полного удаления значения обработчик будет вызван автоматически.

Когда срабатывает oncleared

Событие активируется при полном очищении значения поля.

Пример:

Inputmask("(999) 999-9999", {
    oncleared: function () {
        console.log("Телефон удалён");
    }
}).mask("#phone");

Если пользователь удалит весь номер:

(123) 456-7890 → пустое значение

то выполнится oncleared.

Отличие от onincomplete

onincomplete вызывается при наличии частично заполненной маски.

(123) ___-____

oncleared вызывается только при полном отсутствии пользовательских данных.

(___) ___-____

Отличие от oncomplete

oncomplete

Срабатывает при полном заполнении маски.

Inputmask("9999", {
    oncomplete: function () {
        console.log("Маска заполнена");
    }
});

oncleared

Срабатывает при полном удалении содержимого.

Inputmask("9999", {
    oncleared: function () {
        console.log("Маска очищена");
    }
});

Параметры обработчика

Обработчик получает объект события и экземпляр маски.

Inputmask({
    oncleared: function (event, buffer, opts) {
        console.log(event);
        console.log(buffer);
        console.log(opts);
    }
}).mask("#field");

event

DOM-событие.

buffer

Текущее содержимое буфера маски.

opts

Конфигурация текущей маски.

Пример анализа буфера

Inputmask("99/99/9999", {
    oncleared: function (event, buffer) {
        console.log(buffer);
    }
}).mask("#date");

После очистки буфер может выглядеть так:

[
  "_", "_", "/", "_", "_", "/", "_", "_", "_", "_"
]

Очистка ошибок формы

Один из наиболее распространённых сценариев — удаление сообщений об ошибках.

Inputmask("+7 (999) 999-99-99", {
    oncleared: function () {
        document.querySelector("#error").textContent = "";
    }
}).mask("#phone");

Сброс CSS-классов

Inputmask("9999 9999 9999 9999", {
    oncleared: function () {
        const field = document.querySelector("#card");

        field.classList.remove("valid");
        field.classList.remove("invalid");
    }
}).mask("#card");

Очистка связанных элементов

Автоматический сброс дополнительной информации

Inputmask("999999", {
    oncleared: function () {
        document.querySelector("#city").value = "";
        document.querySelector("#street").value = "";
    }
}).mask("#postal");

Работа с кнопками интерфейса

Inputmask("+7 (999) 999-99-99", {
    oncleared: function () {
        document.querySelector("#submit").disabled = true;
    }
}).mask("#phone");

Использование стрелочных функций

Inputmask("9999", {
    oncleared: () => {
        console.log("Поле очищено");
    }
}).mask("#code");

Однако классическая функция предпочтительнее, если требуется доступ к контексту this.

Работа с this

Inputmask("9999", {
    oncleared: function () {
        console.log(this);
    }
}).mask("#field");

this содержит DOM-элемент поля ввода.

Программная очистка поля

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

const input = document.querySelector("#phone");

input.inputmask.setValue("");

или:

input.value = "";
input.dispatchEvent(new Event("input"));

Использование с динамическими масками

Inputmask({
    mask: [
        "+7 (999) 999-99-99",
        "+1 (999) 999-9999"
    ],
    oncleared: function () {
        console.log("Значение удалено");
    }
}).mask("#phone");

Событие работает независимо от выбранного шаблона.

Совместная работа с clearIncomplete

Опция clearIncomplete автоматически очищает незавершённую маску при потере фокуса.

Inputmask("9999", {
    clearIncomplete: true,
    oncleared: function () {
        console.log("Неполная маска очищена");
    }
}).mask("#code");

Пример:

12__

После blur поле будет очищено, а oncleared — вызван.

Использование с nullable

Inputmask("99/99/9999", {
    nullable: true,
    oncleared: function () {
        console.log("Поле стало null");
    }
}).mask("#date");

Отслеживание состояния формы

Inputmask("+7 (999) 999-99-99", {
    oncleared: function () {
        formState.phone = null;
    }
}).mask("#phone");

Интеграция с React

useEffect(() => {
    Inputmask({
        mask: "+7 (999) 999-99-99",
        oncleared: function () {
            setPhone("");
        }
    }).mask(inputRef.current);
}, []);

Интеграция с Vue

mounted() {
    Inputmask({
        mask: "9999",
        oncleared: () => {
            this.code = "";
        }
    }).mask(this.$refs.code);
}

Интеграция с Angular

ngAfterViewInit(): void {
    Inputmask({
        mask: "99/99/9999",
        oncleared: () => {
            this.date = null;
        }
    }).mask(this.input.nativeElement);
}

Асинхронные операции

Inputmask("999999", {
    oncleared: async function () {
        await fetch("/api/reset", {
            method: "POST"
        });
    }
}).mask("#token");

Работа с локальным состоянием

Inputmask("+7 (999) 999-99-99", {
    oncleared: function () {
        localStorage.removeItem("phone");
    }
}).mask("#phone");

Логирование действий пользователя

Inputmask("9999", {
    oncleared: function () {
        console.log("Пользователь удалил значение");
    }
}).mask("#pin");

Сброс зависимых масок

Inputmask("9999", {
    oncleared: function () {
        document.querySelector("#details").value = "";
    }
}).mask("#code");

Комбинирование нескольких обработчиков

Inputmask("9999", {
    oncomplete: function () {
        console.log("Заполнено");
    },

    onincomplete: function () {
        console.log("Незаполнено");
    },

    oncleared: function () {
        console.log("Очищено");
    }
}).mask("#field");

Поведение при autoUnmask

Inputmask("9999", {
    autoUnmask: true,

    oncleared: function () {
        console.log("Поле очищено");
    }
}).mask("#code");

При очистке возвращается пустое немаскированное значение.

Использование с числовыми масками

Inputmask("decimal", {
    radixPoint: ".",

    oncleared: function () {
        console.log("Число удалено");
    }
}).mask("#price");

Использование с датами

Inputmask("datetime", {
    inputFormat: "dd.mm.yyyy",

    oncleared: function () {
        console.log("Дата очищена");
    }
}).mask("#date");

Использование с email-масками

Inputmask({
    alias: "email",

    oncleared: function () {
        console.log("Email удалён");
    }
}).mask("#email");

Типичные сценарии применения

Очистка зависимого интерфейса

oncleared: function () {
    preview.innerHTML = "";
}

Сброс состояния отправки

oncleared: function () {
    submit.disabled = true;
}

Очистка серверных ошибок

oncleared: function () {
    errorBox.textContent = "";
}

Сброс результатов поиска

oncleared: function () {
    results.innerHTML = "";
}

Возможные проблемы

Обработчик не вызывается

Причины:

  • поле не очищено полностью;
  • значение удалено напрямую через .value;
  • не инициировано событие input;
  • маска ещё содержит placeholder-символы.

Разница между пустым значением и placeholder

Inputmask различает:

__

и

""

oncleared реагирует именно на отсутствие пользовательских данных.

Проверка фактического значения

Inputmask("9999", {
    oncleared: function () {
        console.log(this.inputmask.unmaskedvalue());
    }
}).mask("#field");

Результат:

""

Использование совместно с валидацией

Inputmask("+7 (999) 999-99-99", {
    oncleared: function () {
        validator.resetField("#phone");
    }
}).mask("#phone");

Сложный пример

Inputmask("+7 (999) 999-99-99", {
    clearIncomplete: true,

    oncomplete: function () {
        this.classList.add("valid");
    },

    onincomplete: function () {
        this.classList.add("invalid");
    },

    oncleared: function () {
        this.classList.remove("valid");
        this.classList.remove("invalid");

        document.querySelector("#status").textContent =
            "Поле очищено";
    }
}).mask("#phone");

Практическое значение oncleared

Обработчик oncleared особенно важен в интерфейсах с активной динамикой:

  • CRM-системах;
  • банковских формах;
  • регистрационных интерфейсах;
  • checkout-страницах;
  • системах онлайн-записи;
  • административных панелях;
  • SPA-приложениях;
  • реактивных формах.

Событие позволяет точно определить момент удаления данных и синхронизировать пользовательский интерфейс с текущим состоянием маски.

Оглавление