# Creating field for integer input

**URL:** <https://discourse.processing.org/t/creating-field-for-integer-input/23749>\
**Category:** Coding Questions\
**Created:** [September 9, 2020, 1:35am UTC](https://discourse.processing.org/t/creating-field-for-integer-input/23749 "2020-09-09T01:35:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jaguar](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jaguar](https://discourse.processing.org/u/Jaguar)\
**Post date:** [September 9, 2020, 1:35am UTC](https://discourse.processing.org/t/creating-field-for-integer-input/23749/1 "2020-09-09T01:35:15Z")

</div>

Could you please guide me where to look for creating a field to enter integer/digits in processing? Would appreciate your help!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 9, 2020, 1:38am UTC](https://discourse.processing.org/t/creating-field-for-integer-input/23749/2 "2020-09-09T01:38:37Z")

</div>

> **[Inputs.java](https://Gist.GitHub.com/GoToLoop/bba0c288aaeeb5ef9bb1)**
>
> GitHub Gist: instantly share code, notes, and snippets.

---

<div class="post-metadata">

**Author:** ![raron](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/raron/32/13651_2.png) [@raron](https://discourse.processing.org/u/raron)\
**Post date:** [September 9, 2020, 4:25am UTC](https://discourse.processing.org/t/creating-field-for-integer-input/23749/3 "2020-09-09T04:25:47Z")

</div>

Here’s a somewhat crude example, if not using a library. You could also look into that, like G4P, ControlP5 or others.

```auto
String inputText = "";
String message = "Click mouse here and type a number: "; 
int inputValue = 0;
boolean typingSomething = false;

float x = 50;
float y = 50;

void setup() {
  size(500, 500);
  textSize(16);
}
 
void draw() {
  background(32);
  fill(200);
  text(message + inputText, x, y);
  text("You entered : " + inputValue, x, y+20);
  
  
  if (mousePressed && mouseButton == LEFT) {
    if (mouseX > x && mouseX < x+textWidth(message) + textWidth(inputText) + 10) { // a tad wider area
      if (mouseY < y+textDescent() && mouseY > y-textAscent()) {
        typingSomething = true;
        inputText = ""; // reset
      }
    }
  }

  // Blinking text cursor
  if (typingSomething) {
    if ((millis()/500)%2 == 1) stroke(color(255,200,0)); else stroke(32);
    float cx = x + textWidth(message) + textWidth(inputText);
    line (cx, y+textDescent(), cx, y-textAscent());
  }

}
 
void keyPressed() {
  if (typingSomething) {
    switch(keyCode) {
      case BACKSPACE:
        if (inputText.length() > 0) {
          inputText = inputText.substring(0, inputText.length()-1);
        }
        break;
      case DELETE:
        inputText = "";
        break;
      case ENTER:
        inputValue = parseInt(inputText); // Arguably less confusing than just int(string)
        typingSomething = false;
        break;
      default:
        if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
          inputText = inputText + key;
        }
        break;
    }
  }
}

```

Even shorter (I forgot where I found this):

```auto
String myText = "Type something";
 
void setup() {
  size(500, 500);
  textAlign(CENTER, CENTER);
  textSize(30);
  fill(0);
}
 
void draw() {
  background(255);
  text(myText, 0, 0, width, height);
}
 
void keyPressed() {
  if (keyCode == BACKSPACE) {
    if (myText.length() > 0) {
      myText = myText.substring(0, myText.length()-1);
    }
  } else if (keyCode == DELETE) {
    myText = "";
  } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
    myText = myText + key;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Jaguar](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@Jaguar](https://discourse.processing.org/u/Jaguar)\
**Post date:** [September 9, 2020, 9:01pm UTC](https://discourse.processing.org/t/creating-field-for-integer-input/23749/4 "2020-09-09T21:01:46Z")

</div>

Great Raron! Thank you very much! Let me try with the codes you posted. Will update you further