How to make a number=type input a certain amount of characters?-CodePudding

In my HTML document, I need a 5-9 digit number from the user in a input-number box. I've looked it up and none of the possible solutions worked. My current code looks like this:

<div >
    <input type="number" input placeholder="Type a 5-9 digit number" style="color:rgb(134, 136, 130)">
</div>

I have tried to use the "range" attribute (unwanted effect) , and the "maxlength" attribute is unsupported by number input types.

CodePudding user response：

I think this is what you're looking for:

<input type="number" min="10000" max="999999999" step="1" />

CodePudding user response：

Maybe this will help. It's a JavaScript solution that clears the value if it has more than 9 or less than 5 digits.

document.querySelector('input').addEventListener('blur', (event) => {

  var val = event.target.value;
  
  if(val.length < 5 || val.length > 9){
  
       event.target.value = '';
  
  }

});

<div >
    <input type="number" input placeholder="Type a 5-9 digit number" style="color:rgb(134, 136, 130)">
</div>