How can i add comma automatically after each entered number.
For example like : 1,2,3,4
If i add number 5 after 4 so it should be separated with the comma.
Below is my code.
function addComma(txt) {
txt.value = txt.value.replace(",", "").replace(/(\d+)(\d{3})/, "$1,$2");
}
<input type="text" id="txt" onkeyup="addComma(this);" />
the comma is separating after a few numbers. I require an auto-add comma after each number has been entered.
I change your RegEx. See below example.
function addComma(txt) {
txt.value = txt.value.replace(/(\d)(?=(\d)+(?!\d))/g, "$1,");
}
<input type="text" id="txt" onkeyup="addComma(this);" />
Related
I want that whenever I type a number in the number input field in XXXXXXXXXX format it takes as XXX-XXX-XXXX using HTML, CSS and javascript.
Just like this snippet but without using the mask script.
$('.phone_us').mask('000-000-0000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->
<input type="text" class="phone_us" />
There are some working answers here, but this solution is more stable.
Using the oninput event for instant replace and ...
Applying regex on the full string, to allow copy/paste, and finally ...
This code is shorter as well:
$('.phone_us').on('input', function() { //Using input event for instant effect
let text=$(this).val() //Get the value
text=text.replace(/\D/g,'') //Remove illegal characters
if(text.length>3) text=text.replace(/.{3}/,'$&-') //Add hyphen at pos.4
if(text.length>7) text=text.replace(/.{7}/,'$&-') //Add hyphen at pos.8
$(this).val(text); //Set the new text
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="phone_us" maxlength="12">
Or even without jQuery:
document.querySelector('.phone_us').addEventListener('input', function() { //Using input event for instant effect
let text=this.value //Get the value
text=text.replace(/\D/g,'') //Remove illegal characters
if(text.length>3) text=text.replace(/.{3}/,'$&-') //Add hyphen at pos.4
if(text.length>7) text=text.replace(/.{7}/,'$&-') //Add hyphen at pos.8
this.value=text; //Set the new text
});
<input class="phone_us" maxlength="12">
you could try like this
$(document).ready(function () {
$(".phone_us").keyup(function (e) {
var value = $(".phone_us").val();
if (e.key.match(/[0-9]/) == null) {
value = value.replace(e.key, "");
$(".phone_us").val(value);
return;
}
if (value.length == 3) {
$(".phone_us").val(value + "-")
}
if (value.length == 7) {
$(".phone_us").val(value + "-")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->
<form id="form1" runat="server">
<input type="text" maxlength="12" class="phone_us"/>
</form>
You can implement like this
document.getElementById('txtphone').addEventListener('blur', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3];
});txtphone
<input type="text" class="phone_us" id="txtphone" placeholder = "(000) 000-0000"/>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
Use HTML5 input type=tel to get phone number, and pattern attribute to specify any pattern.
[0-9]{3} represent the 0-9 numeric and 3 digits.
Then, add a hyphen (-), and use the numerics pattern again.
You can use own pattern and your country wise pattern like
[1-9]{4}-[1-9]{6} for the format 1234-567890.
Use the min-length and max-length in HTML5 to set limit.
Note that these patterns won't automatically add the hyphens, but will only allow correctly formatted input.
If you want get more patterns, search on web or see HTML5pattern.com
Pure javascript.
Enter 10 digits in the input field and click anywhere outside the input field.
var myTel = document.getElementById("tel");
myTel.addEventListener("blur", function() {
var str=myTel.value;
var pattern=/[0-9]{10}/;
if (pattern.test(str)) {
newstr=str.slice(0,3)+'-'+str.slice(3,6)+'-'+str.slice(6,10);
myTel.value=newstr;
}
else {
// bad
myTel.value='bad value: only 10 digits';
}
})
<form>
<input type="text" id="tel" name="tel" maxlength='10'>
</form>
In my angular project, I had input type number I need to add a dash after three characters. if add input type number is not working for me if add input type text its working fine.
<input type="number" id="bank-code" (keyup)="onKey($event.target.value)" [value]='value' maxlength="7" required />
onKey(event){
var ele = event.split('-').join('');
if(ele.length > 0){
ele = ele.match(new RegExp('.{1,3}', 'g')).join("-");
}
this.value = ele;
}
Input type number does not allow non-numeric characters (because it's type=number). Notice you can input e character - it's because e is a valid number.
Try to use input type tel with pattern attribute, e.x.:
<input id='phone-num' type='tel' pattern="[0-9\-]+">
I'm trying to validate the full name part of my form, the requirements are:
Only alphabet, spaces between words and "-" are valid.
Minimum of 3 characters and max of 35.
My HTML code is as follows:
function test(myForm)
{
var regex = /^[a-zA-Z]+$/;
if(regex.test(myForm.full_name.value) == false) {
alert("Name must be in alphabets only");
myForm.full_name.focus();
return false;
}
}
<tr>
<td>
<b>Full Name: </b>
</td>
<td>
<input type="text" name="full_name" placeholder="Full Name" required/>
</td>
</tr>
Try this regex, which doesn’t allow space or - characters at the start or end of the string:
var regex = /^[a-zA-Z][a-zA-Z- ]{1,33}[a-zA-Z]$/
This regex should do the work for you /(^[a-zA-Z -]{3,35}$)/
Explanation:
[a-zA-z -] -- Any character space or -
{3,35} -- repeat between 3 to 35 times
Example:
function test(name) {
var regex = /(^[a-zA-Z -]{3,35}$)/
return regex.test(name)
}
console.log(test('valid-name'))
console.log(test('valid Name'))
console.log(test('valid'))
console.log(test('in'))
console.log(test('invalid~name'))
console.log(test('invalidname invalidname invalidname invalidname'))
I have input field which contains number and special characters e.g. comma and dot
while calulating the maxLength of the field i want to skip special characters .
I dont want to restrict the special character.
Expected Output should be :- 1,234 (Total Length :- 4)
<form action="/action_page.php">
Username: <input type="text" maxlength="3" id="myId"/>
<input type="submit" value="Submit">
</form>
jsfiddle link here
Try adding this javascript:
window.onload = function() {
var textInput = document.getElementById("myId");
textInput.oninput = function() {
var temp;
temp = this.value.replace(/[^\w\s]/gi,'');
if (temp.length > 3) {
alert("Invalid"); // Or other stuff you want to do
}
};
};
Note that this code checks input on real time
This should be done with javascript:
var input = document.getElementById('myId');
input.addEventListener('keyup', function () {
// Checking length of string ignoring all non-digit and non-letter characters
if (this.value.replace(/[^\d|[^a-zA-Z]]*/g, '').length == 3) {
console.log('stop and do whatever you need')
}
})
You can try to use HTML5 pattern attribute. Just instead of maxlength type pattern and give it some regex. Could do something like this:
<form action="/action_page.php">
Username: <input type="text" pattern="(?(?=^.\d{1,3},\d{1,3}$)^.{5}$|^.{4}$)" id="myId"/>
<input type="submit" value="Submit">
</form>
I am trying to check only alphabet in textbox(like XYZ) and any alphanumeric or special character value not entered. But my function only check numeric value and one more condition applied, if i pass alphanumeric value or special character in the textbox with alphabet or without alphabet then it will be not accept the textbox value. So please help me..
<script>
function Enable() {
var txt = document.getElementById("textbox");
if (!isNaN(txt.value) || txt.value == "") {
alert("Blank or numeric value");
}
else
alert("Not numeric value");
}
</script>
<input type="button" onclick="Enable();" value="Add" />
<input type="text" id="textbox" />
You can try this regex to validate the input in the input box:
/^a-zA-Z$/i
You can bind the keyup event. When the event triggers, validate the value of the input box against the above mentioned regex, and replace with the desired value. Something like this:
$(this).val($(this).val().replace(/[^a-zA-Z]/g, ''));