Develop Reference

How to apply space in value of <input type="number">?

I am trying to add space in <input type="number"> value in html.
But whenever i add space in value like this value="0401 889 889" than there is nothing appear in <input type="number">.
Without adding a blank space
If i am not add blank space in <input type="number">'s value than its works fine.
<input type="number" value="0401889889">
After adding a blank space in ``
<input type="number" value="0401 889 889">
What i exactly want
<h2>Without adding a space in value</h2>
<input type="number" value="0401889889">
<h2>With adding a space in value</h2>
<input type="number" value="0401 889 889">

Instead, you can use this
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Check this answer : https://stackoverflow.com/a/25121813/14050736
You'll have to modify the regex a bit according to the group of number you desire
Edit : I just noticed : Your input must be in "text" not "number"

If you want to prevent users from typing alphabetic characters you need to set an event listener for the "input" event that delete invalid characters from the value on-the-fly:
const phone = document.getElementById('phone');
phone.addEventListener('input', (event) => {
// delete any character that is not a digit or a space
event.target.value = event.target.value.replace(/[^0-9^ ]/gi, '');
});
// or, if you have more than one input of type "tel" (e.g. mobile and landline)
const phones = document.querySelectorAll('input[type=tel]');
phones.forEach(phone => phone.addEventListener('input', (event) => {
event.target.value = event.target.value.replace(/[^0-9^ ]/gi, '');
}))
<input type="tel" id="phone" name="phone" placeholder="0401 889 889" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">
<input type="tel" id="mobile" name="mobile" placeholder="0401 998 998" pattern="[0-9]{4} [0-9]{3} [0-9]{3}">

Copy only the first 2 characters from a formfield to other field dynamically

I have a form field with the last name and want to generate a customer ID starting with the first two characters from their last name in caps and add a random number to it. So I need the other field which dynamically updates with only the first two characters in uppercase. This is what I have so far:
HTML:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
JAVASCRIPT:
document.getElementById('textfield2').setAttribute('maxlength',2)

You can get the two first characters from your input and put them in the second with javascript :
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value.subst‌​r(0,2).toUppercase()">
<input type="text" id="textfield2" value="">
</form>
I am not sure but I think that the javascript code don't care about the attribut "maxlength". Futhermore, you need use toUpperCase in order to have your result.

<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="txt(this.value)">
<input type="text" id="textfield2" value="">
</form>
<script>
function txt(value) {
document.getElementById('textfield2').value = value.substr(0,2).toUpperCase();
}
</script>
hope it works

Comma separated step for number input box

I can specify the 'step' for thousand increments when a user inputs a number. But why I cannot write '1,000' instead of '1000' for the increment to happen with the comma separation for thousands? How to do this?
<div class="input"><label for="salary">Salary</label>
<input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" step="1000" min="0" required="" type="number"></div>

It cannot be done if you want to stick to the type="number", because:
As Chrome reports:
The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
As specification mentions:
value = floating-point number
Follow the above link to see that spec doesn't mention use of comma at all.
If you want to switch to type="text":
document.getElementById('salary').addEventListener('input', event =>
event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US')
);
<div class="input">
<label for="salary">Salary</label>
<input class='inp_cont' id="salary" pattern="^[\d,]+$" name="salary" placeholder="Enter your salary" required="" type="text">
</div>

pattern for input type=“text” with min and max number and with conditional

How to write pattern for input type="text" (it can't be number and the validation can't be with JS) that allow me to enter only numbers, min:1 and max:30? with some conditional:
<input type="checkbox" id="Checkbox" name="Checkbox" [attr.pattern]="selectedField === 'calendar' ?([1-9]|[12]\d|3[01]): false" [(ngModel)]="periodicObj[0].ischecked" (change)="OnChange($event,0)">
So basically based on selectedField I need to validate my input field

Try this
<input type="text" name="someName" id="someId" required="required" pattern="(30|([1-2][0-9])|[1-9])"/>

Why don't you use input type="number" so it will handle min and max
<input type="number" min="1" max="30" />
And without javascript how you will validate the value ?

Prevent users from entering a value greater than 2 digits in an input field

I have a HTML form field to get the month from the user.
<input type="text" placeholder="MM" size="2" name="month">
I need the field to accept only 2 digits. I tried Form validation, but it allows the user to enter more than 2 digits and then display the validation message. I don't need any validation messages for the field, but the user should be restricted to enter only 2 digits max. Is there a way we can do this using jquery?

<input type="text" placeholder="MM" size="2" name="month" maxlength="2>
The maxlength attribute;
<input type="text" placeholder="MM" size="2" maxlength="2" name="month">
It limits the amount of text you can enter by straight up not allowing you to type more.
EDIT: added snippet

The easiest is using the type='number' attribute and setting max='12':
<input type='number' max='12' min='1'>
SNIPPET
input {
width: 4ex;
padding: 0 1px;
}
input:last-of-type {
width: 6.5ex;
}
<fieldset>
<legend>Enter Date</legend>
<label>Month:</label>
<input type='number' max='12' min='1'>
<label>Day:</label>
<input type='number' max='31' min='1'>
<label>Year:</label>
<input type='number' max='3000' min='2016'>
</fieldset>

This should help you out, whenever the user presses the key down it will check the lenght and then trim the extra chars if there are any:
$("input").keydown(function() {
var value = $(this).val();
if(value.length > 2) {
value = value.substring(0, 2);
$(this).val(value);
}
});