How I could create an <input type="text" /> with following restrictions for the User and formatting extensions, namely using JavaScript or jQuery?
The User can use only numeric chars. Nothing else.
The User can't delete the dot. Never. Is it possible? If it isn't and the user will remove the dot, how to give the dot back automatically on losing focus?
On blur (lose focus), if the decimal places are empty, script will fill it with zeros (↓).
I need this pattern for view: X XXX.XX
(toFixed(2) I can use for two decimal places, but I don't know way to separate string according pattern).
Certainly you've noticed, that the text field should be the price. The script should operate on multiple input fields with class "pr-dec".
<input type="text" class="pr-dec" size="8" value="0.00" />
Thanks a lot for any help, your time and suggestions.
jsfiddle can facilitate it.
Google Translate says he said:
"Matus know the těchhle point I stopped, I'm a beginner and do not know what I stand on it all night"
Sounds like you need to read up on some JavaScript and jQuery tutorials. I began with something like this: jQuery for Absolute Beginners: The Complete Series
Really hope this helps.
You have a number of problems you need to solve.
Break them down into smaller chunks and tackle it from there.
Only numbers
You could watch the field (check out .on) for a change and then delete any character that's not part of the set [\d] or [0-9], but that could get messy.
A better idea might be to watch for a keydown event and only allow the keys that represent numbers.
The Dot
Trying to dynamically stop the user from deleting the dot is messy, so let's just focus on adding it back in when the field is blurred.
That's pretty easy, right? Just check for a . and if there isn't one, append ".00" to the end of the field.
Decimal Places
This is really the same problem as above. You can use .indexOf('.') to determine if the dot is present, and if it is, see if there are digits after it. If not, append "00" if so, make sure there's 2 digits, and append a "0" if there's only 1.
String Pattern
This could really be solved any number of ways, but you can reuse your search for the decimal place from above to split the string into "Full Dollar" and "Decimal" parts.
Then you can use simple counting on the "Full Dollar" part to add spaces. Check out the Javascript split and splice functions to insert characters at various string indexes.
Good luck!
Related
I'm trying to use [react-input-mask]
with a mask of
<InputMask mask='99/99/99' maskChar=''/>
This works great if a user types in 02/21/18
but if a user types in 2/9/18 then they get 29/18/ which is not very intuitive.
I'd like for them to get 02/09/18 added for them. Does anyone know if there is a way for me to achieve this. If not maybe someone could point me in the right direction to a possible solution to writing it myself?
You can use beforeMaskedValueChange to append leading zero conditionally on input length. Of course it should be removed when a user enters 6 numbers.
The input I am working on is for SSNs. I would like an input with hyphens already in place and the user simply needs to type his/her 9 digit SSN and the numbers space themselves around the hyphens.
Here is a crappy paint drawing of what I mean:
These are pretty common in product key entry and other forms like that. I am having a difficult time thinking of how to make one from scratch. I am moderately skilled in HTML, AngularJS, and I know a little JQuery. The input is in its own AngularJs directive for reusuability's sake so that controller is available to do any logic.
I was considering using 3 inputs squished together or some input filtering but I am not sure. If there is already some public lightweight code on github or elsewhere that would be great too.
A goal of this too is to leave the ng-model in tact where it is only a 9-digit number and not containing any hyphens.
Thanks!
Why not use Angular module something like, you can see a preview here
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
Up to now, in our application, we are dealing with formatting numbers in forms in a quite classical way.
We are using jquery and its plugin globalization.
If the user select an input element with a specific class (that represents the format type) then we unformat the value and when the user releases the focus, we format it again.
Is there a efficient way to never unformat numbers : if the user select the input field, then being able modify the value and keep the visible format.
EDIT
After having take a look to mplungjan comment, I would to know if it is possible to use the I18N format dictionary coming from the globalization plugin into the jquery masked input plugin.
EDIT 2
I would like to have the format of the mask adapted to the language of the user. And to I18N the client, we are using this plugin. This plugin possess a dictionary of format by culture.
In our application, the mayority of number fields have 2 decimals. Such as 1 000,00 in french, 1.000,00 in italian or 1,000.00 in english. If a field already has a value (1.000,00 in italian for the example), currently if the user select the field, on the focus, we will deformat the field and show it like this : 1000 (the decimal separator will be the . if there is non-zero decimal). And when the user will release the field.
I would like to improve this by keeping the formatted value while the field is focused. Except for the 2 decimals, there is no more constraints on numbers.
EDIT 3
I tried this mask plugin but I am not able to do exactly what I need. I would like to create a dynamic mask for any numbers with 2 decimals. But it would also be great that if the user does not write decimals numbers then it will autocomplete on blur event with .00 in english (and respectively ,00 in french and italian).
This mask is almost what I need (except for the autocompletion) : 9{1,3}( 999){0,3}[,99]. But its behaviour is still quite tricky for the user. The first block ("9{1,3}") has exactly the behaviour I am looking for. Then if the user just continues writing digits he will directly jump to the last block ("[,99]"). For writing large numbers the user has to write explicitly a space.
Latter i will be able to replace the space by the thousand separator and the "," by the decimal separator.
If anyone has an idea of how improve my mask or about a different plugin, I will be happy to read your comments.
I have to design a registration form
I have to create a textbox and divide it into multiple parts with each part accepting only one character as we can see in the image.
I have no idea how to divide a textbox as later I also need to populate certain fields from the database. Could you please tell me a solution to divide a text box into parts to enter one character in each part.
<input type="text" maxlength="1" />
try to add property maxlength
I created a php sample for your reference
http://pastebin.com/uj2jywKz
If this is just one form and the customer wants to have exact same form, then build it with <input type="text" maxlength="1" />. You can write some JSP tags which generates all these <input type="text" maxlength="1" /> for you.
<mytag:generate size="12">
On the other hand you could use the mask property and change your mask to mask('0|0|0|0|0|0|0'), Then by adjusting the size of input text, font size, and making the mask visible you can mimic the above form. Please note that if you change the color of mask same as background color, then the form looks better too.
What is the real value of producing a form like this in HTML? As far as I can tell forms like this one are made so computer programs can rapidly identify incomplete or incorrect fillings and/or to allow visual inspection of those filled manually.
If the real need here is to produce a form like this out of input values I believe the right design would be to provide a regular form input element and later on process the submission building the expected format.
Separation of concerns is important. In this case forcing a user to type character-tab-character would become a bad experience that would force the developer to put javascript code just to make sure once a letter is typed the cursor can go to the next spot. Not need to mention what editions would look like.
There is a reason why a component like this has not been built so far. The reason is poor UI/UX.
Hope it would help with your decision.
I Think, you need to create seperate input tag for each letter since we cannot splitup a single input tag
I'm thinking if a user submits a message and they click a 'suggest tags' button, their message would be analyzed and a form field populated wIthaca random words from their post.
Is it possible to do this on a scalable level? Would JavaScript be able to handle it or better to Ajax back to python?
I'm thinking certain common words would be excluded (a, the, and, etc) and maybe the 10 longest words or just random not common words would be added to a form field like "tag1, tag2, tag3"
Of course it's possible, you pretty much described the algorithm to test, and it doesn't seem to contain any obviously non-computable steps:
Split the message into words
Filter out the common words
Sort the words by length
Pick the top ten and present them as tags
Not sure what you mean by "scalable level", this sounds client-side to me. Unless the messages are very long, i.e. not typed in by a human, I don't think there will be any problems just doing it.
Agree with #unwind , it depends on the content length of the text and your algorithm to grab the tags(scalability)