oncomplete

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

oncomplete относится к системе callback-функций Inputmask и работает только тогда, когда маска считается завершённой.

Базовый пример:

Inputmask({
    mask: "+7 (999) 999-99-99",
    oncomplete: function () {
        console.log("Маска заполнена");
    }
}).mask("#phone");

После ввода последней обязательной цифры будет вызван обработчик.

Момент срабатывания

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

Пример:

Inputmask({
    mask: "9999-9999",
    oncomplete: function () {
        alert("Код введён полностью");
    }
}).mask("#code");

Последовательность работы:

Пользователь вводит символы.
Inputmask проверяет соответствие маске.
После заполнения всех обязательных позиций вызывается oncomplete.

Синтаксис

Inputmask({
    oncomplete: function () {

    }
});

Также возможна стрелочная функция:

Inputmask({
    oncomplete: () => {
        console.log("Готово");
    }
});

Доступ к элементу через `this`

Внутри обычной функции this указывает на DOM-элемент поля ввода.

Inputmask({
    mask: "999-999",
    oncomplete: function () {
        console.log(this.value);
    }
}).mask("#field");

Результат:

123-456

При использовании стрелочной функции контекст this не привязывается к элементу.

Неправильно:

Inputmask({
    oncomplete: () => {
        console.log(this.value);
    }
});

Правильно:

Inputmask({
    oncomplete: function () {
        console.log(this.value);
    }
});

Проверка полной готовности значения

Одно из основных назначений oncomplete — запуск логики только после завершения ввода.

Пример активации кнопки:

const button = document.querySelector("#submit");

Inputmask({
    mask: "9999 9999 9999 9999",
    oncomplete: function () {
        button.disabled = false;
    }
}).mask("#card");

До полного заполнения кнопка остаётся заблокированной.

Автоматическая отправка формы

Inputmask({
    mask: "999999",
    oncomplete: function () {
        this.form.submit();
    }
}).mask("#sms");

После ввода полного SMS-кода форма отправится автоматически.

Переход к следующему полю

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

Inputmask({
    mask: "9999",
    oncomplete: function () {
        document.querySelector("#nextField").focus();
    }
}).mask("#pin");

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

Inputmask({
    mask: "99/99",
    oncomplete: function () {
        console.log("Месяц и год заполнены");
    }
}).mask(".card-date");

Если маска применяется к нескольким элементам, обработчик будет работать отдельно для каждого поля.

Использование аргументов обработчика

Inputmask передаёт объект события.

Inputmask({
    mask: "999999",
    oncomplete: function (event) {
        console.log(event.type);
    }
}).mask("#index");

Получение неформатированного значения

Внутри oncomplete часто используется метод unmaskedvalue().

Inputmask({
    mask: "+7 (999) 999-99-99",
    oncomplete: function () {
        const raw = this.inputmask.unmaskedvalue();

        console.log(raw);
    }
}).mask("#phone");

Результат:

9991234567

Проверка данных после завершения ввода

oncomplete удобно комбинировать с дополнительной валидацией.

Inputmask({
    mask: "999999999999",
    oncomplete: function () {

        const value = this.inputmask.unmaskedvalue();

        if (value.startsWith("0")) {
            alert("Некорректное значение");
        }
    }
}).mask("#number");

AJAX-запрос после заполнения

Inputmask({
    mask: "999999",
    oncomplete: function () {

        fetch("/check-code", {
            method: "POST",
            body: JSON.stringify({
                code: this.inputmask.unmaskedvalue()
            })
        });
    }
}).mask("#code");

Связь с `onincomplete`

Очень часто oncomplete используется вместе с onincomplete.

Inputmask({
    mask: "9999",

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

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

}).mask("#pin");

Связь с `oncleared`

Inputmask({
    mask: "999999",

    oncomplete: function () {
        console.log("Полностью заполнено");
    },

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

}).mask("#code");

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

oncomplete работает и с массивами масок.

Inputmask({
    mask: [
        "999-999",
        "9999-9999"
    ],

    oncomplete: function () {
        console.log("Одна из масок завершена");
    }

}).mask("#field");

Событие вызывается после завершения любой подходящей маски.

Поведение с необязательными символами

Важно понимать разницу между обязательными и необязательными позициями.

Inputmask({
    mask: "999[-999]"
});

Здесь:

первые три цифры обязательны;
последние три — необязательны.

oncomplete может сработать уже после ввода первых трёх цифр.

Влияние `greedy`

Inputmask({
    mask: "9{1,5}",
    greedy: false,

    oncomplete: function () {
        console.log("Ввод завершён");
    }
});

При использовании квантификаторов поведение зависит от конфигурации маски.

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

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

    oncomplete: function () {
        console.log("Дата введена");
    }

}).mask("#date");

Пример для денежного формата

Inputmask({
    alias: "currency",

    oncomplete: function () {
        console.log(this.value);
    }

}).mask("#price");

Следует учитывать, что валютные alias могут иметь собственные особенности завершённости ввода.

Отправка значения в API

Inputmask({
    mask: "999999999999",

    oncomplete: async function () {

        const response = await fetch("/api/check", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                value: this.inputmask.unmaskedvalue()
            })
        });

        const result = await response.json();

        console.log(result);
    }

}).mask("#iin");

Изменение классов элемента

Inputmask({
    mask: "9999",

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

}).mask("#pin");

Удаление класса ошибки

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

    oncomplete: function () {
        this.classList.remove("error");
    }

}).mask("#phone");

Работа с jQuery

Inputmask поддерживает jQuery-стиль инициализации.

$("#phone").inputmask({
    mask: "+7 (999) 999-99-99",

    oncomplete: function () {
        console.log("Телефон заполнен");
    }
});

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

useEffect(() => {

    Inputmask({
        mask: "999999",

        oncomplete: function () {
            console.log("Готово");
        }

    }).mask(inputRef.current);

}, []);

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

mounted() {

    Inputmask({
        mask: "9999",

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

    }).mask(this.$refs.code);
}

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

ngAfterViewInit() {

    Inputmask({
        mask: "999999",

        oncomplete: function () {
            console.log("Код введён");
        }

    }).mask(this.codeInput.nativeElement);
}

Частые ошибки

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

oncomplete: () => {
    console.log(this.value);
}

this не будет ссылаться на input.

Ожидание срабатывания при неполной маске

Inputmask({
    mask: "9999"
});

Если введено только:

oncomplete вызван не будет.

Конфликт с необязательными частями

mask: "999[-999]"

Разработчики иногда ожидают, что событие сработает только после заполнения всей строки, однако необязательная часть не влияет на завершённость.

Повторное срабатывание

Если пользователь изменяет значение после полного заполнения, а затем снова завершает ввод, oncomplete будет вызван повторно.

Inputmask({
    mask: "9999",

    oncomplete: function () {
        console.log("complete");
    }
});

Отличие `oncomplete` от стандартного `change`

`change`

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

input.addEventListener("change", handler);

`oncomplete`

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

Inputmask({
    oncomplete: handler
});

Отличие `oncomplete` от `blur`

blur вызывается при уходе фокуса даже при пустом поле.

input.addEventListener("blur", handler);

oncomplete зависит только от завершённости маски.

Практический сценарий: подтверждение SMS-кода

Inputmask({
    mask: "999999",

    oncomplete: async function () {

        const submitButton =
            document.querySelector("#submit");

        submitButton.disabled = false;

        const response = await fetch("/verify", {
            method: "POST",
            body: JSON.stringify({
                code: this.inputmask.unmaskedvalue()
            })
        });

        const result = await response.json();

        if (result.success) {
            location.href = "/profile";
        }
    }

}).mask("#sms");

Практический сценарий: проверка банковской карты

Inputmask({
    mask: "9999 9999 9999 9999",

    oncomplete: function () {

        const number =
            this.inputmask.unmaskedvalue();

        if (number.length === 16) {
            console.log("Карта введена полностью");
        }
    }

}).mask("#card");

Практический сценарий: автоматическое определение оператора

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

    oncomplete: function () {

        const phone =
            this.inputmask.unmaskedvalue();

        if (phone.startsWith("701")) {
            console.log("Оператор A");
        }

        if (phone.startsWith("777")) {
            console.log("Оператор B");
        }
    }

}).mask("#phone");

Комбинация с `isComplete()`

Inputmask предоставляет внутреннюю проверку завершённости.

Inputmask({
    mask: "999999",

    oncomplete: function () {

        if (this.inputmask.isComplete()) {
            console.log("Проверка подтверждена");
        }
    }

}).mask("#code");

Использование пользовательских событий

Inputmask({
    mask: "9999",

    oncomplete: function () {

        const event =
            new CustomEvent("maskComplete");

        this.dispatchEvent(event);
    }

}).mask("#pin");

document
    .querySelector("#pin")
    .addEventListener("maskComplete", () => {
        console.log("Собственное событие");
    });

oncomplete

Момент срабатывания

Синтаксис

Доступ к элементу через this

Проверка полной готовности значения

Автоматическая отправка формы

Переход к следующему полю

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

Использование аргументов обработчика

Получение неформатированного значения

Проверка данных после завершения ввода

AJAX-запрос после заполнения

Связь с onincomplete

Связь с oncleared

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

Поведение с необязательными символами

Влияние greedy

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

Пример для денежного формата

Отправка значения в API

Изменение классов элемента

Удаление класса ошибки

Работа с jQuery

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

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

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

Частые ошибки

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

Ожидание срабатывания при неполной маске

Конфликт с необязательными частями

Повторное срабатывание

Отличие oncomplete от стандартного change

change

oncomplete

Отличие oncomplete от blur

Практический сценарий: подтверждение SMS-кода

Практический сценарий: проверка банковской карты

Практический сценарий: автоматическое определение оператора

Комбинация с isComplete()

Использование пользовательских событий

Доступ к элементу через `this`

Связь с `onincomplete`

Связь с `oncleared`

Влияние `greedy`

Отличие `oncomplete` от стандартного `change`

`change`

`oncomplete`

Отличие `oncomplete` от `blur`

Комбинация с `isComplete()`