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.
Related
I'm trying to format numbers dynamically when user enters or changes an input string field. I'm using React and a library NumeralJS for number formatting.
I also use react-jsonSchema-form and I override theirs' number field.
I am stuck with the non-user-friendly way of moving the cursor either at the end or in the begging of the input value depending on if I change the thousands or the numbers after the decimal separator.
Is there any proper solution for that?
For example (adding a number in the integer part the cursor is moved to the end of the number):
ANSWER:
I found a nice library for ReactJS which made the user interface friendly and it takes like 1 min to implement. I recommend it.
https://github.com/s-yadav/react-number-format
The requirement is to:
As the user type his/her Japanese Kanji first and last names,
automatically fill in the corresponding Japanese Katakana first and
last names.
I have been searching for a while now, but I couldn't yet find anything. There seems to be several jQuery plugins that convert Hiragama to Katakana or Romaji or vice-versa but that is not what we need here.
There is one that claims to translate from Kanji to Kana but I don't think the code matches his description (it only executes the code if the input is Kana but that is supposed to be the output!).
Anyway, I need to translate a person's first/last names from Kanji to Kana.
How do I do this?
As this needs to happen while the user is filling the form, I am prefer a JavaScript solution (or any pointers to it) but if there are any pointers how to do this in .NET, I'll very much appreciated too.
It seems like there are several JavaScript solutions online to convert from Kanji, Romaji, Hiragana and Katakana. Check these out and see if they work for you:
JQuery Auto Kana Input
Kuroshiro
jp-conversion
WanaKanaJS
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
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!
I am looking for a numeric spinner that has a property for incremental value (.25, .5, .75), supports auto-rounding in case someone types in a value (or an change event), max and min ranges, and support for custom images would be great.
This is a sample/demo of the page with the controls I plan on using http://jsfiddle.net/NwHGw/. I plan on adding a spinner to the lunch input box. I'm fairly new to JQuery so if this is a matter of just tying together a few different techniques please let me know. The plugin that is being used in this sample is jQuery Time Entry by Keith Wood.
Thanks for your help
Update (12/6 9:22 PM EST):
I have made an update to the code http://jsfiddle.net/NwHGw/1/. I was wondering what everyone thought of this implentation. The box I'm having issues with is the 'Lunch' box. It was originally going to be an decimal (1, 1.5, 2.25, ect), but if I use the same plugin as the time controls then I can specify the input as HH:MM, set the type to 24H and limit the input to say 00:00 to 03:00 and keep the rest of the logic the same. I can then do the decimal conversion on the backend.