包简介

Contains a set of masks to customize text inputs.

README 文档

README

Contém um conjunto de máscaras para personalizar inputs de texto.

Instalação

Você está lendo instruções para Boostrap 4, para ver as instruções para Bootstrap 3 clique aqui.

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

Na view onde deseja utilizar as máscaras, por exemplo layouts/app.blade.php, adicione ao final da tag head:

<head>
	...
	@include("vendor.input-customizer.masks")
	@stack("css")
</head>

E, ao final da tag body:

<body>
	...
	@stack("js")
</body>

Certifique-se de que o jQuery v3.5.1, ou superior, esteja presente no body.

Utilização

Para aplicar uma máscara, basta adicioná-la como classe a um input do tipo texto, por exemplo:

<input class="form-control money-mask" name="price" type="text">

Ou em blade:

{!! Form::text('price', null, ['class' => 'form-control money-mask']) !!}

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

Adicione a classe abaixo a um select para desativar a primeira opção:

first-disabled

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

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:

<script type="text/javascript">
	$(document).on("focus", ".name-mask", function(){
		$(this).inputmask("replace-with-type", {options});
	});
</script>

Para mais instruções, leia a seguinte documentação: RobinHerbots/Inputmask.

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

Um muito obrigado a fpviviani pelo desenvolvimento de algumas máscaras.

Licença

The MIT License (MIT). Clique aqui para maiores informações.

brenofortunato/input-customizer 适用场景与选型建议

brenofortunato/input-customizer 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 7.9k 次下载、GitHub Stars 达 3，最近一次更新时间为 2020 年 03 月 09 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「input」「laravel」「custom」「mask」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 brenofortunato/input-customizer 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 brenofortunato/input-customizer 我们能提供哪些服务？

定制开发 / 二次开发

基于 brenofortunato/input-customizer 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 brenofortunato/input-customizer 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

kolyunya/yii2-map-input-widget 28

Yii2 map input widget. Allows you to select geographcal coordinates via a human-friendly inteface.

jlorente/yii2-widget-remainingcharacters 5

Widget to add a remaining character counter to text inputs and textareas

bimthebam/silverstripe-native-color-input 2

Native (browser) color input field for SilverStripe

foa/filter-input-bundle 1

Integration bundle for Aura.Input with Aura.Filter

hamedov/passport-multiauth 5

Multiauth and custom grants for laravel passport

able/io 1

phpABLE file-system library

brenofortunato/input-customizer

包简介

关键字：