# How do I make an input box accept numbers only?

**URL:** <https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572>\
**Category:** Coding Questions\
**Created:** [May 7, 2020, 12:39am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572 "2020-05-07T00:39:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 7, 2020, 12:39am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/1 "2020-05-07T00:39:09Z")

</div>

```auto
let x=createInput("", "number");

```

creates a textbox with tiny scrollbars to scroll through the numbers and can also have negative numbers.

I want to create a textbox so that people can put in their age.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 7, 2020, 1:00am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/2 "2020-05-07T01:00:20Z")

</div>

Can’t users type into the textbox as well?

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 7, 2020, 1:04am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/3 "2020-05-07T01:04:23Z")

</div>

They can and they can also get to negative numbers as well.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 7, 2020, 1:06am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/4 "2020-05-07T01:06:48Z")

</div>

So your goal is to restrict to positive numbers only?

I would recommend starting with a google search. Something like “html number input restrict values” will return a ton of helpful results.

Good luck!

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 7, 2020, 1:08am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/5 "2020-05-07T01:08:17Z")

</div>

It does if I were coding in html.

It’s alright, I wrote a function to check the input for numbers only.

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 7, 2020, 1:23am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/6 "2020-05-07T01:23:07Z")

</div>

@GoToLoop do you mind checking my isNumber function? It works and I can’t seem to be able to ‘break’ it but I want to know if it’ll always work.

Thanks.

[https://editor.p5js.org/Bassam/sketches/KUOzRI4AI](https://editor.p5js.org/Bassam/sketches/KUOzRI4AI)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 7, 2020, 3:53am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/7 "2020-05-07T03:53:07Z")

</div>

> [@Bassam](#):
>
> It does if I were coding in html.

If you’re coding in p5.js, then you’re coding in HTML and JavaScript.

Anything you can do in HTML and JavaScript, you can do in p5.js.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 7, 2020, 8:40am UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/8 "2020-05-07T08:40:16Z")

</div>

I would just go with the HTML standard, as @Kevin is suggesting. You could use the `min` and `max` attributes to set a reasonable age span. Don’t like the scrollbars? [Turn off the number input spinners](https://css-tricks.com/snippets/css/turn-off-number-input-spinners/).

But if you are going the custom way… Your `isNumber` function right now accepts input other than numbers.

1. Enter 12.
2. Go left one step (set the character input between 1 and 2).
3. Input anything, like letters.

Maybe you could do something like this instead?

```javascript
function setup() {
  let age = createInput('');
  age.input(enforcePositiveInteger);
}

function enforcePositiveInteger() {
  const userInput = this.value();
  const onlyDigits = userInput.replace(/^0+|[^\d]/g, '');
  
  if (userInput !== onlyDigits) {
    this.value(onlyDigits);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 7, 2020, 12:20pm UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/9 "2020-05-07T12:20:13Z")

</div>

I’m glad I was suspicious of that function.

Your enforcePositiveInteger() is working, thanks. I need to figure out that regex though. I think I would much rather use what’s in the link you posted:

```auto
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

```

coupled with some simpler code (I don’t like regular expressions because I don’t understand them, yet). But I’m too much of a beginner to know how to use css code. I threw it at the bottom of my style.css file and nothing happened.

@Kevin I’m sure what you say is true, however, as a beginner I can tell you that there is a gap in the ‘how-to’ out there between html and p5.js. So, I have found code out there in html that claims to do what I want, however, it is very unclear to me how to implement it in p5.js. This is one of the reasons I was looking for all the methods that are available to an object yesterday, as you might remember.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 7, 2020, 10:26pm UTC](https://discourse.processing.org/t/how-do-i-make-an-input-box-accept-numbers-only/20572/10 "2020-05-07T22:26:43Z")

</div>

Yeah, I feel for you, regular expressions sure is a bit awkward in the beginning. But I do encourage you to pursue learning at least the basics. [Learn Regex the Easy Way](https://github.com/ziishaned/learn-regex/blob/master/README.md) looks like a good starting point.

 ![regex](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/832dcbcbd5dfcf3fee69e3139646b70b9f917f36.png)  
Tools like [https://regex101.com](https://regex101.com) are helpful when trying to understand a regular expressions by breaking them up into smaller pieces.

> But I’m too much of a beginner to know how to use css code. I threw it at the bottom of my style.css file and nothing happened.

Sorry about that, I didn’t verify the CSS. It looks like Firefox is a special snowflake. That’s what so charming with browsers, they don’t always work the same way. Append this snippet of CSS as well:

```css
input[type=number] {
  -moz-appearance: textfield;
}

```