JsDaddy / ngx-mask

Angular Plugin to make masks on form fields and html elements.
https://jsdaddy.github.io/ngx-mask
MIT License
1.15k stars 298 forks source link

Allow leading zeros in numeric masks #1240

Closed lucasousi closed 10 months ago

lucasousi commented 1 year ago

πŸš€ feature request

Description

For numeric masks, a leading zero should be accepted to improve the usability, as in the following case: **Scenario:** Currently, when a user enters a value like "45" into a masked input field and then wants to change it to "0.45," they face usability issues. They have to first type the decimal separator and then input the leading zero, which requires manually moving the caret cursor to the left. **Current Behavior:** 1. User enters "45". 1. To change it to "0.45" they must type the separator, then move the cursor left, and finally input the necessary zero. ### Describe the solution you'd like I propose enabling the following scenario: 1. User types "0" in front of the existing value, resulting in "045" 2. User inputs the separator, leading to the desired value of "0.45" ### Describe alternatives you've considered I acknowledge that allowing leading zeros may lead to values like "045," but this can be handled by automatically removing the leading zero on BLUR (similar to the functionality provided by the `leadZero` property, adding decimal places after BLUR). * Pay attention to the issues [343](https://github.com/JsDaddy/ngx-mask/issues/343) and [1238](https://github.com/JsDaddy/ngx-mask/issues/1238) * Multiple zeros may continue to be prevented.
andriikamaldinov1 commented 10 months ago

@lucasousi Thanks for using Ngx-mask. we have added this behaviuor, only it will not work on blur, but automatically when filling. 03 => 0.3 .3 => 0.3 It example - https://stackblitz.com/edit/angular-lk6bsk?file=src%2Fmain.ts