I have a textbox on which I apply input masks.
I have downloaded JS library from here link to js Library with bit documentation
What I need to do is that I need format like this
any length integer/any length characters/CONSTANT lets say = hello/
current year lets say = 2012
that is 6666/Edward/thanks SO/2012
if var lenght is not possible than atleast one integer or one character and atmost 15 integer or character
Maybe this - http://jsfiddle.net/ZYH9f/
It's one mandatory integer/character and 5 optional others:
$("input").mask("*?*****/*?*****/*?*****/9999");
Related
I'm trying to set the number of decimals at 2 in an input. When I type a comma in it, the value becomes NaN so I would like get my number instead of this.
TS
#ViewChild('number') input;
limitNbOfDecimals() {
var regex =
this.form.number.search(/^(\d+(?:[\.\,]\d{0,2})?)$/) == 0
? true
: false;
if (regex == false) {
// Convert the value to a number
var nb: number = +this.input.nativeElement.value;
//set decimals at 2
this.input.nativeElement.value = nb.toFixed(2);
}
}
HTML
<input class="form-control" type="text" [(ngModel)]="form.number"
#number
name="number"
(input)="limitNbOfDecimals()"
/>
EDIT
I manage to add a comma in the number but if I try to add more than 2 decimals after it removes the numbers after the comma like 1,11 -> 1
This isn't a full answer, in the sense of having a total solution, but hopefully helps you get to one (and it's too long for a comment).
The spec at https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number) states:
This specification does not define what user interface user agents
are to use; user agent vendors are encouraged to consider what would
best serve their users' needs. ..... a user agent designed for the
French market might display the value with apostrophes between
thousands and commas before the decimals, and allow the user to enter
a value in that manner, internally converting it to the submission
format described above.
It would seem that the only sure way - if you don't have control over what browsers your users have - of ensuring they can type numbers in the format they are used to in their local setting is to take input as type text and on each keystroke check that they have typed something valid (as you have defined it) and when they submit it convert to a decimal number.
Searching provides code for doing this, depending on exactly what your requirement is for the number formats though you may be better off coding it from scratch.
To add more than 2 decimal values, you need to tell like .toFixed(4) etc..
its an odd behavior. m using input field field where type is number
and if i enter 1230 model value remains -> 1230
but as i type 01 its becomes -> 1
where as i can see 01 in input value . so this something to do with angular js
i need 00 in model because its user phone number and number type is to stop user from entering text
any help will be appreciated
https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
test can be run at angular site
The type number allows you to enter +-,.. So you cannot achieve your goal of preventing the user from entering "invalid" numbers in the first place.
It's also not very user friendly, as telephone numbers are often formatted using spaces and braces. A user can no longer copy and paste such values into the input field. Digits in phone numbers can also be represented by letters btw. 123-HELLO is equal to 12343556.
Please note that there's also an input type tel. It's not particularly useful but semantically more appropriate.
If you only want to save and display the value then use the input as is. It doesn't make much sense to force a user to adhere to your preferred pattern. Adding pattern or ngPattern allows you to use regular expressions to limit the possible characters. If you need the plain number then strip all non-numeric characters - and possibly convert roman letters to numbers - before usage.
This question already has answers here:
Mask US phone number string with JavaScript
(9 answers)
Closed 7 years ago.
How can I mask a HTML input text with a mask for phone number?
Here in Brazil, in some states, the number format can change.
For example:
(dd)xxxx-xxxx
this is the default number format, where dd is the state code, and the x's are the numbers.
BUT, in some states, the number nine is added to the phone number, like this:
(dd)9xxxx-xxxx. (let's call it "new format")
the var dd isn't important, what I want to do is when the user type the new format, the hyphen automatically appears after the 4th X.
When the users start entering the phone number, you could have a regex such as ^(\d{2})9 and regex match the string to see if the hyphen needs to be added at a different place.
You could use something like formatter.js to do the job for you!
I have not tried it, but the demos look quite solid.
Try using two inputs with different masking (8 digit & 9 digit respectively) and switch them based on the state selected in the form.
Is there a way in javascript or jQuery to detect and change dynamically while typing a date for both a key input and a copy and paste to a text box?
I'm trying to create a functional text box which has two digits such as a month.
Since the month can be a number from 1 - 12 I want to enforce the first digit to be a 1 or a 0.
The trick that I'm trying to do however is when the text box first gains focus and a user beging to type a number, if that number is 2 - 9 I want a zero to automatically fill the first spot and then but the 9 in the second spot.
Before I type anything this date input would look like so:
__/__/_____
If I type a "1"
1_/__/_____
If I type "2" should get
02/__/_____
If I type "22" should get
02/2_/_____
If I type "77" should get
07/07/_____
I would be very interested for in an answer with code or a link to a tool that already does this or a link to a previous post?
Eventually I want to put it in a masked so 7/7/2011 or 7/7/11 or 07/07/2011 will alway fill to 07/07/2011. In the final final version I am trying to get the year to default to the current decade but have a drop down to each 10 year++ --.
Why not attach a listener to the blur of the textbox, rather than to the user's typing.
Think about the user experience if you were typing "1", and all of a sudden, the input started adding or removing zeroes to what you were doing, while you were doing it?
var dayInput = document.getElementById("day-input");
// usually, I'd just use event-listeners, but feel free to refactor
dayInput.onblur = handleDayOrMonth;
function handleDayOrMonth () {
var el = (this === window) ? event.srcElement : this,
number_string = el.value;
// checking that it's an actual number
if (!isNaN(parseInt(number_string)) {
if (number_string.length === 1) { el.value = "0" + number_string; }
}
}
Handling the year would be just the same, except that you'd be adding "20" to the start of whatever it is.
Feel free to jQuery it up.
I believe that the functionality that you want is provided by the jQuery Masked Input plugin
Demo: http://jsfiddle.net/SO_AMK/SEXAj/
Please note that it also only allows numeric characters.
Answer goes here... jQuery masked input plugin.
I have a requirements for masking a zip field so that it allows the classic 5 digits zip (XXXXX) or 5 + 4 format (XXXXX-XXXX).
I could so something like:
$('#myZipField').mask("?99999-9999");
but the complication comes from the fact that dash should not be showing if the user puts in only 5 digits.
This is the best I came up with so far - I could extend it to auto-insert the dash when they insert the 6th digit but the problem with this would be funny behavior on deletion (I could stop them from deleting the dash but it would patching the patch and so forth, it becomes a nightmare):
$.mask.definitions['~']='[-]';
$("#myZipField").mask("?99999~9999", {placeholder:""});
Is there any out of the box way of doing this or do I have to roll my own?
You don't have to use a different plug-in. Just move the question mark, so that instead of:
$('#myZipField').mask("?99999-9999");
you should use:
$('#myZipField').mask("99999?-9999");
After all, it isn't the entire string which is optional, just the - and onward.
This zip code is actually simple, but when you have a more complex format to handle, here is how it's solved with the plugin (from the demo page):
var options = {onKeyPress: function(cep, e, field, options){
var masks = ['00000-000', '0-00-00-00'];
mask = (cep.length>7) ? masks[1] : masks[0];
$('.crazy_cep').mask(mask, options);
}};
$('.crazy_cep').mask('00000-000', options);
If you're using jQuery already, there are probably hundreds of plugins for masks etc, for example:
http://www.meiocodigo.com/projects/meiomask/
So I don't think you'd have to roll your own
When you use jQuery Inputmask plugin and you want to use 4 or 5 digit values for zip code you should use:
$('#myZipField').inputmask("9999[9]");
Why not have the field be transparent, and have a text object behind it with the form in light grey? So they see #######-#### in the background, and then rig it so the letters dissapear as they type. At that point, it suggests that they should enter a dash if they want to put the extra four, right? Then, you could just rig the script to autoinsert the hyphen if they mess up and type 6 numbers?