CODEWITHSUNDEEP
javascriptjqueryhtml
Goldbones
Goldbones

Reputation: 1457

HTML - Size limit for text and number on the same input

I have this code for put limits on input area.

<input type="text" name="myinput" maxlength="10">

This code just work for text. I want to add max 4 for int and max 6 for text

Success example:

input: abdc123d
input: 1234abcde

Not possible:

input: 123456789
input: dasdsadsa

Upvotes: 0

Views: 77

Answers (1)

Keith
Keith

Reputation: 24241

Here is an example that add a .bad class.

You could then check for .bad class on saving etc..

$('input').on('input', function () {
  var $t = $(this),
      val = $t.val(),
      wantlen = 6;
  if (parseInt(val).toString() === val) {
    wantlen = 4;    
  }
  
  $t.toggleClass('bad', val.length > wantlen);  
});
input {
  background-color: lightgreen;
}

.bad {
  background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text"> <br/>

<input type="text">

Upvotes: 1

Related Questions