PHPackages brenofortunato/input-customizer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. brenofortunato/input-customizer ActiveLibrary[Utility & Helpers](/categories/utility) brenofortunato/input-customizer =============================== Contains a set of masks to customize text inputs. 38.0k2JavaScript Since Apr 27Pushed 5y ago1 watchersCompare [ Source](https://github.com/BrenoFortunato/input-customizer)[ Packagist](https://packagist.org/packages/brenofortunato/input-customizer)[ RSS](/packages/brenofortunato-input-customizer/feed)WikiDiscussions master\_bootstrap4 Synced 1w ago READMEChangelogDependenciesVersions (2)Used By (0) InputCustomizer =============== [](#inputcustomizer) Contém um conjunto de máscaras para personalizar inputs de texto. Instalação ---------- [](#instalação) Você está lendo instruções para Boostrap 4, para ver as instruções para Bootstrap 3 [clique aqui](https://github.com/BrenoFortunato/input-customizer/tree/master_bootstrap3). Para instalar, basta utilizar o comando abaixo: ``` composer require brenofortunato/input-customizer ``` Em seguida, publique os assets: ``` php artisan vendor:publish --provider="BrenoFortunato\InputCustomizer\InputCustomizerServiceProvider" ``` Configuração Inicial -------------------- [](#configuração-inicial) Na view onde deseja utilizar as máscaras, por exemplo **layouts/app.blade.php**, adicione ao final da tag **head**: ``` ... @include("vendor.input-customizer.masks") @stack("css") ``` E, ao final da tag **body**: ``` ... @stack("js") ``` Certifique-se de que o **jQuery v3.5.1**, ou superior, esteja presente no body. Utilização ---------- [](#utilização) Para aplicar uma máscara, basta adicioná-la como classe a um **input do tipo texto**, por exemplo: ``` ``` Ou em blade: ``` {!! Form::text('price', null, ['class' => 'form-control money-mask']) !!} ``` Máscaras -------- [](#máscaras) As máscaras disponíveis são: - money-mask ``` > R$ 99.999.999.999.999,99 ``` - float-mask ``` > 999.999,99 ``` - double-mask ``` > 99.999.999.999.999,99 ``` - integer-mask ``` > 999.999 ``` - zero-to-ten-mask ``` > 0 > 10 ``` - percentage-mask ``` > 0 > 100 ``` - latitude-mask ``` > -90 > 90 ``` - longitude-mask ``` > -180 > 180 ``` - document-mask ``` > 999.999.999-99 > 99.999.999/9999-99 ``` - cpf-mask ``` > 999.999.999-99 ``` - cnpj-mask ``` > 99.999.999/9999-99 ``` - national-id-mask ``` > 99.999.999-9 > AA-99.999.999 ``` - phone-mask ``` > (99) 9999-9999 > (99) 99999-9999 ``` - datetime-mask ``` > 01/01/0001 00:00 > 31/12/9999 23:59 > Ao enviar o formulário, será automaticamente formatado para YYYY-MM-DD HH:mm:00 ``` - datetime-blockpast-mask ``` > 01/01/0001 00:00 (a partir da data atual) > 31/12/9999 23:59 > Ao enviar o formulário, será automaticamente formatado para YYYY-MM-DD HH:mm:00 ``` - datetime-blockfuture-mask ``` > 01/01/0001 00:00 > 31/12/9999 23:59 (até a data atual) > Ao enviar o formulário, será automaticamente formatado para YYYY-MM-DD HH:mm:00 ``` - date-mask ``` > 01/01/0001 > 31/12/9999 > Ao enviar o formulário, será automaticamente formatado para YYYY-MM-DD 00:00:00 ``` - date-blockpast-mask ``` > 01/01/0001 (a partir da data atual) > 31/12/9999 > Ao enviar o formulário, será automaticamente formatado para YYYY-MM-DD 00:00:00 ``` - date-blockfuture-mask ``` > 01/01/0001 > 31/12/9999 (até a data atual) > Ao enviar o formulário, será automaticamente formatado para YYYY-MM-DD 00:00:00 ``` - time-mask ``` > 00:00 > 23:59 > Ao enviar o formulário, será automaticamente completado com a data atual no formato YYYY-MM-DD HH:mm:00 ``` - time-blockpast-mask ``` > 00:00 (a partir da hora atual) > 23:59 > Ao enviar o formulário, será automaticamente completado com a data atual no formato YYYY-MM-DD HH:mm:00 ``` - time-blockfuture-mask ``` > 00:00 > 23:59 (até a hora atual) > Ao enviar o formulário, será automaticamente completado com a data atual no formato YYYY-MM-DD HH:mm:00 ``` - two-digits-day-mask ``` > 01 > 31 ``` - two-digits-month-mask ``` > 01 > 12 ``` - two-digits-year-mask ``` > 01 > 99 ``` - two-digits-month-year-mask ``` > 01/01 > 12/99 ``` - two-digits-month-year-blockpast-mask ``` > 01/01 (a partir da data atual) > 12/99 ``` - two-digits-month-year-blockfuture-mask ``` > 01/01 > 12/99 (até a data atual) ``` - duration-mask ``` > 00:00:00 > 23:59:59 ``` - time-interval-mask ``` > 99:99 - 99:99 > 99:99 - 99:99; 99:99 - 99:99 > 99:99 - 99:99; 99:99 - 99:99; 99:99 - 99:99; ... ``` - vehicle-plate-mask ``` > AAA-9999 ``` - zipcode-mask ``` > 99999-999 ``` - state-mask ``` > AA ``` - credit-card-mask ``` > 9999-999999-9999 > 9999-999999-99999 > 9999-9999-9999-9999 ``` - card-cvv-mask ``` > 999 > 9999 ``` Bônus ----- [](#bônus) Adicione a classe abaixo a um select para desativar a primeira opção: - first-disabled Atualização ----------- [](#atualização) Caso você já tenha adicionado este pacote anteriormente, você deverá forçar a atualização dos assets para ter acesso às novas máscaras: ``` php artisan vendor:publish --provider="BrenoFortunato\InputCustomizer\InputCustomizerServiceProvider" --force ``` Este comando sobrescreverá o arquivo em **resources/views/vendor/input-customizer/masks.blade.php**, portanto não o edite. Caso deseje adicionar suas próprias máscaras, siga as instruções da próxima sessão. Máscaras Personalizadas ----------------------- [](#máscaras-personalizadas) Para adicionar suas próprias máscaras, na view onde foi realizada a configuração inicial (no exemplo, **layouts/app.blade.php**), faça uso do seguinte template: ``` $(document).on("focus", ".name-mask", function(){ $(this).inputmask("replace-with-type", {options}); }); ``` Para mais instruções, leia a seguinte documentação: [RobinHerbots/Inputmask](https://github.com/RobinHerbots/Inputmask). Solução de Problemas -------------------- [](#solução-de-problemas) Na view onde foi realizada a configuração inicial (no exemplo, **layouts/app.blade.php**) certifique-se de **não** ter incluído Javascript e CSS dos seguintes plugins: - Moment - Daterangepicker - Inputmask - jQuery MaskMoney - SweetAlert2 Além disso, certifique-se de ter incluído o **jQuery v3.5.1**, ou superior, ao body da view supracitada. Agradecimentos -------------- [](#agradecimentos) Um muito obrigado a [fpviviani](https://github.com/fpviviani) pelo desenvolvimento de algumas máscaras. Licença ------- [](#licença) The MIT License (MIT). [Clique aqui](https://github.com/BrenoFortunato/input-customizer/blob/master/LICENSE) para maiores informações. ### Health Score 24 — LowBetter than 30% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity26 Limited adoption so far Community11 Small or concentrated contributor base Maturity33 Early-stage or recently created project Bus Factor1 Top contributor holds 91.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/12672996?v=4)[Breno Fortunato](/maintainers/BrenoFortunato)[@BrenoFortunato](https://github.com/BrenoFortunato) --- Top Contributors [![BrenoFortunato](https://avatars.githubusercontent.com/u/12672996?v=4)](https://github.com/BrenoFortunato "BrenoFortunato (56 commits)")[![fpviviani](https://avatars.githubusercontent.com/u/45500924?v=4)](https://github.com/fpviviani "fpviviani (5 commits)") ### Embed Badge ![Health badge](/badges/brenofortunato-input-customizer/health.svg) ``` [![Health](https://phpackages.com/badges/brenofortunato-input-customizer/health.svg)](https://phpackages.com/packages/brenofortunato-input-customizer) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)