How to force the user to put only numbers

Question

I want the user to only be able to use input for numbers I've tried several things like oninput="this.value = this.value.replace(/[^0-9.]/g, '') and a lot more but for example the code I sent if I type a letter and keep pressing the letter on the keyboard it won't turn it to anything, I need a code that will 100% force the user to type only numbers doesn't matter what happens. if I could put a number in the input box that the user cant delete for example 0 it will be good to.

Please, add a [mcve] by [edit]ing your question. It's important to show the HTML used in the input and your current or former tries. It's hard to help you by having nothing to base on. — Calvin Nunes, Apr 09 '19 at 20:49
Is this an HTML form the user would be filling out? If so, you could try — Derek K, Apr 09 '19 at 20:52
@CalvinNunes All I need is how do i write 0 in the input and won't let the user delete it — , Apr 09 '19 at 21:04
Ok, but, what you've tried? Can we see your code and then help debugging it and find a solution? — Calvin Nunes, Apr 09 '19 at 21:06

score 0 · Answer 1 · edited Apr 09 '19 at 21:48

0

You can use <input type=...> as mentioned in the input specification.

edited Apr 09 '19 at 21:48

Wai Ha Lee

8,598
83
57
92

answered Apr 09 '19 at 20:52

Pavel Kratochvil

452
2
9

It is not an answer, please review: [answer] – Calvin Nunes Apr 09 '19 at 20:53
? The question was how to allow user to write only numbers. I answe the question. Not sure what part is agaist the rule :) – Pavel Kratochvil Apr 09 '19 at 21:00
@PavelKratochvil I mean only numbers without e and . – Apr 09 '19 at 21:03
https://stackoverflow.com/questions/37043867/how-to-avoid-decimal-values-in-input-type-number this thread could be also helpful – Pavel Kratochvil Apr 09 '19 at 21:07
You didn't answer. He's trying to put only numbers in a input (that we don't even know how it is created) and your answer don't explain what he should do and why it will help him. You just pointed a link saying to "use the specs". It is more a comment than a real answer. But, it's up to you to let it here – Calvin Nunes Apr 09 '19 at 21:08
I have just give him source to study. That is in my opinion best way how to give answers.. For sure you can say do it this way and post a code but what everyone already knows how to use ctrl+c and ctrl+v, you know.. :D – Pavel Kratochvil Apr 09 '19 at 21:14
For what it's worth, your answer looked, at first glance, to not be an answer. It **is** an answer. Maybe it's only a partial answer, but it's not quite just a comment either. I've edited it to make it more of an answer. – Wai Ha Lee Apr 09 '19 at 21:52
Thanks for edit :) this is what i meant with my original answer. But seems like i chose wrong words to express myself. – Pavel Kratochvil Apr 10 '19 at 13:01

score 0 · Answer 2 · answered Apr 09 '19 at 21:20

There are a few different ways to accomplish this but one of them would be capturing the keypress itself and returning false if the input is not a number.

Also if I understand you correctly, to add a default value of "0", just define it in the input directly like value="0", or you could use a placeholder="0" if that's what you're looking for.

<input type="number" value="0" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

score 0 · Answer 3 · answered Apr 09 '19 at 22:19

While this wouldn't enforce the user input to numbers only, you may want to consider using the pattern attribute to leverage some built-in behaviour. If you type non-numeric characters, the text colour will turn red:

input:invalid {
  color: red;
}

<input type="text" pattern="[0-9]+"/>

Then we can start looking at the constraint validation API:

The Constraint Validation API enables checking values that users have entered into form controls, before submitting the values to the server.

If you type non-numeric characters and try to submit the form, you should see a built-in tooltip displaying a custom error message:

const input = document.querySelector('input');

input.addEventListener('invalid', () => {
  if (input.validity.patternMismatch) {
    input.setCustomValidity('Numbers only please!!');
  }
});

input:invalid {
  color: red;
}

<form>
  <input type="text" pattern="[0-9]+"/>
  <button type="submit">submit</button>
</form>

But you see the problem with your code is that if i type text for example: ABC and i hit the submit I can not put a number after I put text and it's getting bugged — , Apr 29 '19 at 13:45

score 0 · Answer 4 · answered Apr 10 '19 at 17:43

      $("#but").click(function(){
        let inp_val = $("#txt").val();
        if(isNaN(inp_val)){
          alert("Just enter a number.");
          $("#txt").val("");
        }
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">
<input type="button" value="CLICK" id="but">

How to force the user to put only numbers

4 Answers4