How do I make an input box accept numbers only?

p5.js Coding Questions
1 
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.

1 Like
2

Can’t users type into the textbox as well?

3

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

4

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!

5

It does if I were coding in html.

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

6

@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

7

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.

1 Like
8

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.

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?

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);
  }
}
2 Likes
9

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:

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.

1 Like
10

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 looks like a good starting point.

regex
regex1492×872 45.1 KB

Tools like 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:

input[type=number] {
  -moz-appearance: textfield;
}
3 Likes