Develop Reference

Leading zeroes in React input form

I'm new to React and I would like to know how can I insert leading zeroes if the input number is less then 10. I mean, the defaultValue is 00 and, if I type 1, I want a zero to be automatically inserted in front of 1, having 01 in the input tag field. I'm using React Hook Form to manipulate the form.
<input
type="number"
name="Number"
defaultValue="00"
ref={register({ required: true })}
/>
Do you guys have any idea how to do this?
Thank you all!

You can use onChnage event of input element, and manipulate the value in order to add leading zero to your number.

01 is not exactly a number, it is a string. Maybe you should use a text input and not a numeric one.

Can backend data overwrite maxLength for inputField

I am new to React and whole understanding of Front end development. So excuse me if its a silly question.
I have this below html input and its maxLength is specified as 24. So it will only allow user to enter upto 24 characters. If user tries tying anything more, it wont allow and only 24 characters are seen.
<input type="text" maxlength="24" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />
Uptil now is ok. But the earlier code had maxLength="32". So users had saved upto 32 characters and that data is stored in Db. When this default value is picked and shown in input field, what will i be seeing ? Will i see truncated 24 characters only or will i see 32 characters initially and as user edits the field, it will truncate additional characters and only 24 characters will be shown. "
Any suggestions highly appreciated

It might depend on the browser, but my local test with chrome says the following: values longer than the max are shown if set programmatically (setting the value of the element), but it is not possible to add characters to the input field. They can only be removed.
This might be different for other browsers.
Thanks to #thespeciamone for the example
<input style = "width: 500px" maxlength = "24" value = "More Than Twenty Four Characters Boi. Also users can inspect element and delete the maxlength setting and now there is no limit.">

ASP.NET MVC Input Type number with decimal

I have a web form that has lots of input controls. Most of them are numbers, not integers but decimals. Now my problem is, when a decimal has a comma separator (eg. 120,44) that input type remains empty (but when I check with the element inspector I see that the value attribute of that control has the value 120,44, it seems like is just not being displayed). Then I type the value manually inside the input and then I check with document.getElementById("#myelemet").val and the value is right.
So what else could i try here to have my decimal numbers displayed (without the comma separator they are displayed properly)
I have already tried to set the setting inside of web.config
<globalization fileEncoding="utf-8"
requestEncoding="utf-8"
responseEncoding="utf-8"
culture="de-DE" uiCulture="de-DE" />
but it didnt help. Then I tried also to set the lang attribute for the input lang="de-DE" also didnt help ...

Parse amount in input in Javascript

I have an input in my form where the user have to write an amount to pay. The problem is that the user have different ways to do it, it could be 1,350.55 (this is he correct one), but it could be something like this 1.350,55 or 1.350. So, is there any way to parse the amount to my correct form?
Thanks!

You want to parse the input, right?
Why not try to make the input a currency field?
And then parse it into a container through angular, so that customers may see the value and then work with the angular filtered value.
Here is a fiddle:
http://jsfiddle.net/lacrioque/vouLmrac/
<p><label for='numberinput'>Your Price here: </label><input type='number' name='numberinput' ng-model='numbertofilter' placeholder="1,350.99"/></p>
<p>Price: <span>{{numbertofilter | currency }}</span></p>

If you don't know the format, how would you parse 13.995? Would it be "13955" (an integer) or the float one?
You may instead want to mask the format and avoid thousand separators entirely. And tell the user not to use them.

Use ng-pattern
Attach ng-pattern to your input and feed it a RegEx of your required pattern. This way people will only be able to input in the correct way and you can avoid bad data.
Please check out this link for more information on input formatting.
Example
Here I have an example for any whole number up to 9999999 its very simple if you understand RegEx
<input type="number" ng-model="price" name="price_field"
ng-pattern="/^[0-9]{1,7}$/" required>
Note
You can check your RegEx here.

Using HTML input as function parameter causing infinite loop

So I've made a prime factor calculator in JavaScript and am trying to display it on my website. I want to be able to let the user choose the input, however whenever I submit the input it causes an infinite loop. I have narrowed down the cause to the code I'm using as the parameter for the function.
Here is the HTML:
<div class="pf-calculator-instructions-wrapper"><p class="pf-calculator-instructions">
<em>Input a number to the field below. Output will appear above. Maximum 15 digits.</em></p>
</div>
<input id="pf-input" type="number" maxlength="15" class="pf-calculator-input"/>
<button class="submit-button" onclick="findPrimeFactors(document.getElementById('pf-input').value)">Submit</button>
I've tried it so the function with just a number (10) as the parameter and it worked fine, but when changing it to take the input value instead (still 10) the page just freezes like I'm causing an infinite loop. Am I missing something here?
Thanks!

As mentioned in a comment, I hadn't converted my input from a string to an integer. I wrongly assumed that it would already be in this format due to the input type being number.