html numeric input allow 6 digits only

Question

I have a input. I want only numeric values. And I want there to be six numbers only. How do i do it? I have:

<input type="number" placeholder="YYMMDD" id="myKadA" maxlength="6" style="width:90px !important" onchange="checkMyKad()" size="8"  class="form-control block-centered ic-input" required>

There is a css to remove the scroll bar from the input boxes.

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: textfield; 
}

Previously it was input type="text" and maxlength="6" limited it to six chars long. How do i now specify a number 6 digit only

if you got the answer then need to accpt the answer – Sangram Badi Apr 03 '18 at 07:27 — Sangram Badi, Apr 03 '18 at 07:27

score 2 · Answer 1 · answered Apr 03 '18 at 06:46

JAVASCRIPT WAY

HTML

<input type="number" placeholder="YYMMDD" id="myKadA" onkeydown="limit(this, 6);" onkeyup="limit(this, 6);" onkeyup="this.value = minmax(this.value, 0, 6)" required>

JS

function limit(element, max_chars)
{
    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}
function minmax(value, min, max) 
{
    if(parseInt(value) < min || isNaN(parseInt(value))) 
        return 0; 
    else if(parseInt(value) > max) 
        return 100; 
    else return value;
}

HTML WAY

<input type="number" placeholder="YYMMDD" id="myKadA" maxlength="6" min="0"  max="6" required>

JQUERY WAY

<input type="number" placeholder="YYMMDD" id="myKadA" min="0" max="6" required>
var max_chars = 6;
$('#myKadA').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});
$("#myKadA").change(function() {
      var max = parseInt($(this).attr('max'));
      var min = parseInt($(this).attr('min'));
      if ($(this).val() > max)
      {
          $(this).val(max);
      }
      else if ($(this).val() < min)
      {
          $(this).val(min);
      }       
});

score 2 · Answer 2 · answered Sep 09 '20 at 04:19

2

Try

<input type="number" onKeyPress="if(this.value.length==6) return false;"/>

or else you can change the input type to "month"

<input type="month" min="2018-03" value="2018-05">

Hope this works.

answered Sep 09 '20 at 04:19

Aftab Ali

21
1

score 1 · Answer 3 · answered Apr 03 '18 at 06:43

1

Use the attribute max and min for input type number

answered Apr 03 '18 at 06:43

Lucifyer

158
2
11

Fecosos · Answer 4 · 2018-04-03T09:18:26.923

Since maxlength attribute is ignored with <input type"number"/> as explained here.

You could try adding some validation with javascript using something like:

HTML

 <input onKeyDown="validateNum(event, this)" type="text" maxlength="6" max="6" min="6" placeholder="YYMMDD" id="myKadA" style="width:90px !important" onchange="checkMyKad()" class="form-control block-centered ic-input" required>

Javascript

function validateNum(event, input) {
  event.preventDefault();
  var currVal = input.value ? input.value : "";
  // Checks if the key pressed is a number and the right length
  if(!isNaN(event.key) && currVal.length < 6){
    input.value = currVal + event.key;
  }
  // Backspace functionality
  else if(event.keyCode == 8 && currVal > 0) {
    input.value = input.value.slice(0, -1);
  }  
}

if max is set as 999999, it allows 1234567 to be entered and throws a error. I want to block the seventh digit from being entered . — Jacel, Apr 03 '18 at 07:13
@Jacel try adding a little script like in my edited response — Fecosos, Apr 03 '18 at 07:49

score 0 · Answer 5 · answered Apr 03 '18 at 06:47

0

this looks like a promising answer to your case.

answered Apr 03 '18 at 06:47

Dzak

412
4
17

Works well to limit to six digits only. But allows characters to be entered. – Jacel Apr 03 '18 at 07:16
@Jacel I found there variety of ideas that all are suited for some cases. I thought that combining some of the solutions would be great to achieve your exact case. I found that many of the answers checking the input only on submit (alerting the user only on submit). in some cases this is great, in others you would like to block the input from inserting more chars. that is why I post the link and not the code. :) – Dzak Apr 03 '18 at 09:50

score 0 · Answer 6 · answered Apr 03 '18 at 06:49

0

As you have mention in placeholder -YYMMDD I would suggest you to use input type="date"

answered Apr 03 '18 at 06:49

user223321

155
1
15

score 0 · Answer 7 · answered Apr 03 '18 at 07:18

Max length will not work with . You have to make use of jQuery/Javascript. Below is a working snippet.

HTML:

<form>
    <label for="myKadA" class="control-label">Number:</label>
    <input type="number" id="myKadA" data-max="6" class="form-control" required>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

jQuery:

<script>
    $(document).ready(function () {
        $(".btn-primary").click(function (e) {
        e.preventDefault();

        var keyObj = $("#myKadA");
        var maxLength = parseInt(keyObj.attr('data-max'));

        if((keyObj).val().length !== maxLength){
            alert("You must enter exactly " + maxLength + " digits");
        }
        });
    })
</script>

score 0 · Answer 8 · answered Sep 24 '22 at 16:12

0

Try to write maxlength=6 without quotes. I tried it in react js like this way: maxLength={6}; and it helped me.

answered Sep 24 '22 at 16:12

Renar Lutvaliyev

1
1

score -2 · Answer 9 · answered Apr 03 '18 at 06:44

-2

If you want only numbers in input field,

<input type="number" max="6"/>

so it renders into input type number field which allows only 6 digits

answered Apr 03 '18 at 06:44

Ahmad Raza

65
1
10

This limits the maximum value of the field to 6, not the number of digits. – cyanic Jan 07 '20 at 21:24

html numeric input allow 6 digits only

9 Answers9