I want to show an error message to a user, if he enters more characters in a text field than specified and this specification may change with the initial characters provided. Along with that, I need to process each character that user enters for some business purposes. e.g.

Let's think of a credit card field.

Different credit card types have different Max Lengths. I would like to stop users from entering more characters in the field than their credit card type allows.

However, the credit card type can be detected only when the user provides few initial characters of the credit card.

My approach here is to try to detect credit card on every key press, and set the maxlength of the field according to credit card type detected. If not detected, keep the max length to 19 (which is maximum for all)

What I have tried

---------------------------------------------------------------------
|   Event    | Problem                                              |
| ------------------------------------------------------------------|
|            |  Change will not be triggered until the user         |     
|  OnChange  | moves out of the field. Since I need this event      |
|            | on every char entered, this is not helpful           |
|-------------------------------------------------------------------|
|            | It gives issues when a user presses the key for a    |
|  KeyDown   | longer duration. Characters are entered multiple     |
|            | times, but this event is triggered only once.        |
|-------------------------------------------------------------------| 
|  KeyUP     | Same as above.                                       |
|-------------------------------------------------------------------|
|  KeyPress  | I am getting older value. The newly added character  |
|            | is not available. Hence incorrect calculation        |
---------------------------------------------------------------------

I have an alternative of using time-out, but looking for better options.

My Question is different than this one. because of above mentioned reasons.

Please suggest a good solution for this.

I want to show an error message to a user, if he enters more characters in a text field than specified and this specification may change with the initial characters provided. Along with that, I need to process each character that user enters for some business purposes. e.g.

Let's think of a credit card field.

Different credit card types have different Max Lengths. I would like to stop users from entering more characters in the field than their credit card type allows.

However, the credit card type can be detected only when the user provides few initial characters of the credit card.

My approach here is to try to detect credit card on every key press, and set the maxlength of the field according to credit card type detected. If not detected, keep the max length to 19 (which is maximum for all)

What I have tried

---------------------------------------------------------------------
|   Event    | Problem                                              |
| ------------------------------------------------------------------|
|            |  Change will not be triggered until the user         |     
|  OnChange  | moves out of the field. Since I need this event      |
|            | on every char entered, this is not helpful           |
|-------------------------------------------------------------------|
|            | It gives issues when a user presses the key for a    |
|  KeyDown   | longer duration. Characters are entered multiple     |
|            | times, but this event is triggered only once.        |
|-------------------------------------------------------------------| 
|  KeyUP     | Same as above.                                       |
|-------------------------------------------------------------------|
|  KeyPress  | I am getting older value. The newly added character  |
|            | is not available. Hence incorrect calculation        |
---------------------------------------------------------------------

I have an alternative of using time-out, but looking for better options.

My Question is different than this one. because of above mentioned reasons.

Please suggest a good solution for this.

• javascript
• jquery

• 1 Please show the related code. – iCollect.it Ltd Commented Jul 8, 2015 at 11:54
• use .change(function(){ ... }); instead of keypress(); – Ji_in_coding Commented Jul 8, 2015 at 11:55
• 1 @Ji_in_coding change only fires on input elements when they lose focus, which doesn't sound like the behaviour that the OP wants. – Rory McCrossan Commented Jul 8, 2015 at 11:56
• how about using the keydown.. and use "counter" variable? – Ole K Commented Jul 8, 2015 at 11:56
• @MohitKanwar you say you can't use keyup, but have you tried keydown? – Rory McCrossan Commented Jul 8, 2015 at 11:56

5 Answers 5

I think this serves most of the cases you need.

This will work for every time the input is changed. And reset value if we enter more than allowed length.

var limit = 10; //your input limit
$(document).on('ready',function(){
    var oldValue = $( "input[type='text']" ).val();
    $( "input[type='text']" ).on('keydown',function(e) {
        oldValue = $( this ).val();
    })
    $( "input[type='text']" ).on('input propertychange',function(e) {
        newValue = $(this).val();
        if(newValue.length > limit){
            $(this).val(oldValue);
            alert('String too long.');
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text">

Updated fiddle.

try this

This will work when you change input

$(someTextInputField).on('input',function(e){
  var txtLength =this.value.length;
  var validLength=4;
  if(txtLength > validLength){ 
      this.value=this.value.substr(0, validLength);
      alert("please enter only 4 character");
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input id="someTextInputField" type="text">

$(function() {
  var max_lenght = 5;
  
  $("#myTextInput").keypress(function(event) {
    if ($(this).val().length > max_lenght - 1 && $(this).val().length > 0) {
      event.preventDefault();
      alert("max_length reached");  
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="myTextInput" placeholder="type here..." />

Try this code, which check on keypress if max_lenght variable (which is 5 in this case) is reached (I added -1 to the condition).

I suggest adding a 50ms delay to the keypress event. As follows.

$('#test').keypress(function(){
  setTimeout(function(){
    $('#debug').append('<br>' + $('#test').val());
  }, 50);


});

see example here

here is a more simple (I believe) solution, as far as I understand the problem:

HTML:

<input type="text" id="test" />
<div id="result"></div>

JS:

var maxLength = 10;

$('#test').keypress(function(e){
  if($(this).val().length + 1 > maxLength){
    event.preventDefault();
  }
  else {
    $('#result').html($(this).val() + String.fromCharCode(event.which));
  }
});

play with it here in Codepen: http://codepen.io/anon/pen/zGWQvG