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
Related
I have an input field for credit card number and I want to achieve a different behaviour from the default place holder.
My place holder is more of a pattern: "xxxx-xxxx-xxxx-xxxx" and I want that in every number entered only the specific x's will be written over and the rest of the placeholder will remain intact(each preserves its own color).
I have seen this post which suggests the use of mask and jQuery but I prefer solutions that combines html, css and angular instead.
If it helps there is an illustration:
What you are looking for is called an input mask. It is unfortunately not a feature of HTML, but you’ll find plenty of libraries and questions on Stackoverflow (:
What is difficult is finding a good one that is
working with copy & paste or autocomplete
using number-optimized on-screen keyboards
not messing up the number when correcting a character in the middle
works well with assistive technology, which users with disabilities rely on
That’s why credit card inputs that work really well do not use input masks on the web.
Usually their implementation follows this principles:
The original input is broken apart into inputs and static text (the placeholder)
Styling is removed from the inputs
Everything gets wrapped in an element that then is styled like an input
Text is styled in a way to align flow of static text and input text
Write a lot of JavaScript to implement behaviour like a single input
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
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.
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'm looking for a way to apply some formatting to a single-line text input field in JavaScript. It would work like this:
The user types in a formula, such as:
(7 + 3) ^ x
As the user types, my code would format it using colour to look like this:
I can do the necessary parsing but I don't know how to apply these styles to the user's text as they edit.
I've been struggling to find the right thing to Google for. My searches mostly lead me to full-blown text editors.
Is there such a component? If not, can I achieve this with a <input type="text"...> field?
Out of curiosity I built this: http://jsfiddle.net/hunter/npbDL/
This catches key strokes and inserts a span-wrapped character into an element. If the character maps to an item in the character-to-class collection it also gives that span the class specified.
It also handles enter and backspace.
You can probably take it from there...
I think the only way you can achieve the styling you want is by wrapping HTML tags around individual characters then styling the tags, and I don’t think you can do that inside an <input type="text">.
There is the widely-supported contenteditable attribute which makes most elements editable, but I’m not sure that it allows this either. If no-one else provides a better answer, you might want to view source on the last example here: http://www.hyperwrite.com/Articles/contenteditable.aspx
You can't format a text field with various colors. You might be able to use colors in WYSIWYG editors... or Flash.
I don't think you can change of individual characters in any <input> nor <textarea>. Look into source code of Etherpad for example - it uses similar system (not exactly the same - it highlights other stuff) and it might help you.