JAVASCRIPT


Input field accept only numbers


This post will show you how to restrict keyboard inputs so that only numbers can only be pressed for a specific HTML element to ensure that the number-only fields get valid values.

<script type="text/javascript">
 function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
      }
</script>
Now call this function from an onKeypress event of an input text HTML element.
Accept Only Numbers: <input type="text" name="f1" onkeypress="return isNumberKey(event)" >
Demo
Accept Only Numbers:


                                                               

Input field accept phone number in xxx-xxx-xxxx format


<script  type="text/javascript">
function maskInput(input, textbox, location, delimiter,evt) {
    var locs = location.split(',');
    var KeyId=evt.keyCode;
      //alert(KeyId);
 if((KeyId!="8") && (KeyId!="46")&& (KeyId!="35")&& (KeyId!="36")&& (KeyId!="37")&& (KeyId!="39")&& (KeyId!="109")&& (KeyId!="173")&& (KeyId!="189")){
    for (var delimCount = 0; delimCount <= locs.length; delimCount++) {
        for (var inputCharCount = 0; inputCharCount <= input.length; inputCharCount++) {

           if (inputCharCount == locs[delimCount]) {

                if (input.substring(inputCharCount, inputCharCount + 1) != delimiter) {

                    input = input.substring(0, inputCharCount) + delimiter + input.substring(inputCharCount, input.length);
                }
            }
        }
    }
    textbox.value = input;
 }
}
</script>
Now call this function from an onKeyDown event of an input text HTML element.
Phone Number: <input type="text" name="phone"   id="phone"  onKeyDown="javascript:return maskInput(this.value,this,'3,7','-',event);"  maxlength="12" onKeyPress="return isNumberKey(event);" placeholder="Phone Number"/> 
Demo
Phone Number:


Input field accept only numeric valus (Trying to paste Text Content Not Accept)


This post will show you how to restrict keyboard inputs so that only numbers can only be pressed for a specific HTML element to ensure that the number-only fields get valid values, and trying to paste other than numerics its not accept.
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
           ob.value = ob.value.replace(invalidChars,"");
      }
 }
</script>
Now call this function from an onKeyUp event of an input text HTML element.
Accept Numerics only: <input type="text" name="f1" onkeyup="checkInput(this)" />
Demo
Test Accept Numerics only:


Character counter in JavaScript


This is about creating a character counter for textarea and limit it accordingly. You may have seen this kinda stuff in some messaging site mostly in sites which provides SMS facilities. They limit us to enter only specified number of characters in text area. Also in some sites there are limitation on characters in comments.Twitter also having character limit in tweet.

Iam explained in this article, how to use the count character javascript with the help of a form. The count value decreases when you type each character into textbox.

create a text area for entering text and an input text box which will hold remaining character count.
<form name="myform" METHOD=POST>
<textarea name=comment wrap=physical id=textArea rows=3 cols=30 onkeyup=charcount()></textarea><br>
<script type="text/javascript">
document.write("<input type=text name=limit size=4 readonly value="+count+">");
</script>
</form>

Create JavaScript function to calculate length of text entered in text area and change input box’s value accordingly and if length goes beyond limit then substring text up to length limit:
<script type="text/javascript">
//Edit the counter/limiter value as your wish
var count = "50";   
function charcount(){
var tex =document.myform.comment.value;
var len = tex.length;
if(len > count){
        tex = tex.substring(0,count);
        document.myform.comment.value =tex;
        return false;
}
document.myform.limit.value = count-len;
}
</script>
The java script function "charcount()" will limit the size or length of characters typed in textarea or text box.

Demo
Enter Text:

2 comments: