Develop Reference

How i can add comma after each entered number only

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);" />

How to show remaining characters if the textarea is prefilled?

If I have prefilled textarea, the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.
Also, how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"
Can someone help please?
function handle(){
let element = document.getElementById('input')
let value = element.value
let maxLength = element.maxLength
document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
}
<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.
Just run your function once on page load:
function handle() {
let element = document.getElementById('input')
let value = element.value
let maxLength = element.maxLength
document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
}
handle();
<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>
how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"
Do an if on each keyup:
function handle() {
let element = document.getElementById('input');
let value = element.value;
let maxLength = element.maxLength;
document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`;
if (maxLength - Number(value.length) == 0) {
document.getElementById('remaining').style.color = "red";
} else if (maxLength - Number(value.length) <= 100) {
document.getElementById('remaining').style.color = "yellow";
}
}
handle();
<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

<input type=“text” maxlength=“4”> should not count comma and dot in maxlength

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>

Check if the entire String value in Textbox is zero(0) or of special characters

I have a Textbox in which i'm getting the input of type text having the length 20, I have a scenario in which i have to evaluate whether the entire string input from the client is not zero or any special characters
e.g: 00000000000,00000,00,00000,00000/-/--,/-/-----////,aBadf-018---///sdf484,AA///---000
all these above inputs are invalid, the string could be of any length in between 2 to 20,
i have restricted the user to input other special characters other than hyphen and dash,
regex used over here to invalidate the value other than hyphen and dash are as follows :
" /[^a-zA-Z0-9/-]/g "
<input type="text" name="consumer_number" maxlength="25" ng-disabled="!form_data[selectedTab].electrici‌​ty.check" alpha-numeric-with-slash-and-hyphen data-ng-model="form_data[selectedTab].electric‌​ity.unique_no" class="input-field" data-ng-blur="validateElecConsumer(selectedTab‌​)" ng-class="{true:'invalid-field',false:''}[form‌​_data[selectedTab].e‌​lectricity.check && form_data[selectedTab].invalid.electricity]" required />
Now my concern is how could i display a message right upfront that whatever the input the user have provided is invalid.

This may help:
var app = angular.module("app", []);
app.controller("MyController", function($scope){
$scope.inputtext = "";
$scope.onSubmit = function() {
var val = $scope.inputtext;
if (val.length < 2
|| val.length > 20
|| !val.match(/[^a-zA-Z0-9/-]/g)) {
alert("Unacceptable");
} else {
alert("you pass");
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyController">
<input maxlength="20"
id="inputtext"
ng-model="inputtext" type="text"/>
<button id="submitbutton" ng-click="onSubmit()" type="text">submit</button>
</div>

Small modification to the limit of a textarea characters counter

The code below counts the chars typed in a textarea. If you reach the 250 limit you can not add more. How can I let people to type more than 250?
Like ok, you have 250 minimum but it doesn't mind if you put more than this. Thanks!
<script type='text/javascript'>
var maxLength=250;
function charLimit(el) {
if (el.value.length > maxLength) return false;
return true;
}
function characterCount(el) {
var charCount = document.getElementById('charCount');
if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
if (charCount) charCount.innerHTML = maxLength - el.value.length;
return true;
}
</script>
<form>
<textarea onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)" rows="8" cols="40"></textarea>
</form>
<p><strong><span id="charCount">250</span></strong> more characters available.</p>

To allow the number of characters entered to exceed the maxLength, the following blocks of code should be removed.
function charLimit(el) {
if (el.value.length > maxLength) return false;
return true;
}
and
if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
and
onKeyPress="return charLimit(this)"
You might also want to consider modifying the following line to prevent displaying negative numbers.
if (charCount) charCount.innerHTML = Math.max(maxLength - el.value.length, 0);

change this line:
var maxLength=250;
change it to whatever max you want

the maxLength is beeing restricted by a var named "maxLength"
If you change that value you can change the max value required, because of all that comprobations that you're making