Question

177

Limit number of characters in input type number

rated 0 times [ 182] [ 5] / answers: 1 / hits: 78738 / 10 Years ago, fri, february 28, 2014, 12:00:00

Im trying to limit to X number the characters in a input (type of number). ive tried a lot of options and none seems to work. I dont want to use the option tel as it needs the numeric keyboard on a mobile device (yes, with ., and all the symbols) I tried also the pattern solution but it only worked for iOS, didnt work in android (displayed the normal keyboard).

The best way would be that if the user hits the limit dont let him type anymore, if he wants to highlight the text and re-type a different number he is allow to. Just not let him type more than the specified number of characters.

So, any help is appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maleahp

Add To Favorites

Follow

Total Points: 223

Total Questions: 102

Total Answers: 116

Location: Sao Tome and Principe

Member since Wed, Dec 29, 2021

2 Years ago

answered 11 Years ago soniap · Accepted Answer

Note: charCode is non-standard and deprecated, whereas keyCode is simply deprecated.

Check this code

JavaScript

<script>

function check(e,value)

{

    //Check Charater

    var unicode=e.charCode? e.charCode : e.keyCode;

    if (value.indexOf(.) != -1)if( unicode == 46 )return false;

    if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false;

}

function checkLength()

{

    var fieldLength = document.getElementById('txtF').value.length;

    //Suppose u want 4 number of character

    if(fieldLength <= 4){

        return true;

    }

    else

    {

        var str = document.getElementById('txtF').value;

        str = str.substring(0, str.length - 1);

        document.getElementById('txtF').value = str;

    }

}

and HTML input with number type below

onInput //Is fired also if value change from the side arrows of field in Chrome browser



<input id=txtF type=number onKeyPress=return check(event,value) onInput=checkLength() />

Fiddle Demo

Update -- Little bit generic code example

Change above function into this one

function checkLength(len,ele){

  var fieldLength = ele.value.length;

  if(fieldLength <= len){

    return true;

  }

  else

  {

    var str = ele.value;

    str = str.substring(0, str.length - 1);

    ele.value = str;

  }

}

In HTML use like this

<!-- length 4 -->    

<input id=txtF type=number onKeyPress=return check(event,value) onInput=checkLength(4,this) />

<!-- length 5 -->    

<input  type=number onKeyPress=return check(event,value) onInput=checkLength(5,this) />

<!-- length 2 -->    

<input  type=number onKeyPress=return check(event,value) onInput=checkLength(2,this) />

Demo