Comments (7)
The ui-mask-placeholder
attr can be used to maintain the original placeholder behavior.
That said, from the three examples, only on third one is used correctly.
You should use:
<input ui-mask="(999) 999-9999" ng-model="x" placeholder="(555) 555-5555" ui-mask-placeholder/>
<input ui-mask="99/99/9999" ng-model="y" placeholder="MM/DD/YYYY" ui-mask-placeholder/>
<input ui-mask="(999) 999-9999" ng-model="z" placeholder="Phone number" ui-mask-placeholder/>
Anyway, your third example should work. So, there is a bug with empty placeholders.
On this plunk you can see a (not so good) workaround for this problem: http://plnkr.co/edit/gxQ2LJgQQuAjY9wtNvx8?p=preview
I'll try to fix this and do another PR asap.
from ui-mask.
Thanks for following up!
Sorry if I seem thick, but what is the difference between the version you posted and the version I posted for the first two examples? I think they are the same? I copy/pasted wrong when I first posted this issue and immediately edited to correct it, so perhaps you caught the first incorrect version -- sorry about that.
I'll look at the plunker now.
from ui-mask.
Ah, I see now in the plunker that I am indeed using the directive wrong entirely.
I copied the example from demo.html, which does not specify anything for the ui-mask-placeholder attribute it just includes it empty. Is that not a valid way to use it? In which case, I would be happy to update demo.html.
Lastly, in that plunker even with the workarounds it appears that neither of the phone number examples work quite right. Try typing "1234567890" -- by the time you're done typing it will read "(123) 467-8955". Or try typing "650" -- by that point it will suddenly switch to "605" instead. Very mysterious!
If more examples or test cases or something would help, happy to provide; or else let me know if there's some other way I can help. Thanks!
from ui-mask.
My mistake, I just copy/paste and forgot to edit:
<input ui-mask="(999) 999-9999" ng-model="x" ui-mask-placeholder="(555) 555-5555"/>
<input ui-mask="99/99/9999" ng-model="y" ui-mask-placeholder="MM/DD/YYYY"/>
<input ui-mask="(999) 999-9999" ng-model="z" placeholder="Phone number" ui-mask-placeholder/>
from ui-mask.
I got that too, there is a bug when you type the same key as on placeholder.
from ui-mask.
awesome, thank you for the corrections and for the fixes. It looks like now the latter two examples work, but the first one still has the issue where typing the same key as what's in the placeholder messes it up. I'll open a separate issue for that.
from ui-mask.
@dimrsilva good day man, your workaround...if the mask is (555) 555-5555, I can't enter the digit 5. Please help.
from ui-mask.
Related Issues (20)
- Glitch if mask contains prefix and prefix has space character
- Allow modelViewValue to be set via config rather than element attribute
- config provider name is incorrect HOT 3
- Mask not being properly formatted HOT 1
- Caret skips to second digit on focus when phone number already present
- Cursor position in ui-number-mask is incorrect
- Mask value being setted as 0 if null
- Paste not working
- package v1.8.7 on npm is not up to date with the code in the repo
- allowInvalidTrue causes backspace deletes all HOT 1
- Add option to reverse fill
- can work with other "directive" together?
- Cursor position is wrong when Voice over is on
- Deleting using backspace properly not working while it's a masked field like phone number in angular formly
- Cursor moves to the one before last position after mouse select all and enter new character
- Cursor moves to the one before last position if select mask character and enter new values
- Archive this project HOT 2
- ui-mask="1.1.9.999" error
- Is it possible to have 2 mask
- Demo page inoperable HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui-mask.