# Multi line Text box needed!

**URL:** https://discourse.processing.org/t/multi-line-text-box-needed/2318
**Category:** Coding Questions
**Created:** [August 2, 2018, 6:18pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318 "2018-08-02T18:18:11Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 2, 2018, 6:18pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/1 "2018-08-02T18:18:11Z")

</div>

Is there any function for a multi line textbox input? like createInput() but in paragraph form like the one im typing in right now

---

<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: [August 2, 2018, 9:31pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/2 "2018-08-02T21:31:24Z")

</div>

Sounds like you’re looking to a text area?

In HTML, you’d use a `<textarea>` tag. More info [here](https://www.w3schools.com/tags/tag_textarea.asp).

In P5.dom, you can create a textarea using the `createElement()` function:

```
createElement('textarea', 'your text here');

```

More info in [the reference](https://p5js.org/reference/#/p5/createElement).

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 3, 2018, 9:15pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/3 "2018-08-03T21:15:24Z")

</div>

Thanks so much @Kevin !

As the reference seems incomplete, how would I set a maximum letter count for the element?

---

<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: [August 3, 2018, 9:19pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/4 "2018-08-03T21:19:58Z")

</div>

The reference is not incomplete- you’re just entering HTML-land where things are a bit different.

I’d recommend googling something like “html textarea set maximum length” for a ton of results.

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 3, 2018, 9:20pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/5 "2018-08-03T21:20:47Z")

</div>

So there isn’t a way to do it in the script?(with p5.js) I would have to make the area in the html itself?

---

<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: [August 3, 2018, 9:26pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/6 "2018-08-03T21:26:38Z")

</div>

Remember that P5.js is “just” JavaScript code. Try googling something like “javascript textarea set maximum length” for a ton of results.

Taking a step back, I encourage you to get comfortable using google- not everything is going to be obvious from the P5.js reference, especially stuff that gets into HTML and general JavaScript. The good news is there are a lot of really great resources out there, just a search away! Good luck!

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 3, 2018, 9:27pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/7 "2018-08-03T21:27:52Z")

</div>

Ok, one more: what would the ID for my created element be?

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 3, 2018, 9:32pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/8 "2018-08-03T21:32:19Z")

</div>

wait i found it nevermind

---

<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: [August 3, 2018, 9:37pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/9 "2018-08-03T21:37:21Z")

</div>

> [@codingking03](#):
>
> Ok, one more: what would the ID for my created element be?

It’s all up to you. You can set whatever ID you want.

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 3, 2018, 9:38pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/10 "2018-08-03T21:38:47Z")

</div>

for future views here is the link to all the element functions:  
[https://p5js.org/reference/#/p5.Element](https://p5js.org/reference/#/p5.Element)

---

<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: [August 4, 2018, 1:12am UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/11 "2018-08-04T01:12:20Z")

</div>

> **[\<textarea\>](https://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)**
>
> The HTML textarea element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

```auto
'use strict';

let textArea;

function setup() {
  noCanvas();
  textArea = createElement('textarea').attribute('maxlength', 30).size(100, 50);
}

```

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 5, 2018, 5:13pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/12 "2018-08-05T17:13:07Z")

</div>

.textBounds doesnt work for new lines

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [August 5, 2018, 5:23pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/13 "2018-08-05T17:23:15Z")

</div>

What do you mean with new lines? You mean `\n` character? Please provide some code for context.

Kf

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 5, 2018, 5:34pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/14 "2018-08-05T17:34:50Z")

</div>

```auto
function preload(){
    font = loadFont('assets/Quicksand-Regular.otf');
}

var activeMessages = [];
var messageHistory = [];

function showMessages() {

    for(var i = 0; i < activeMessages.length; i++){
        //textBubble(activeMessages)
    }

};

function textLine(textin,x,y){
    textSize(15);
    this.x = x;
    this.y = y;

    this.lines = 1;
    this.height = this.lines*10;

    this.sampleLine = textin //split(textin,' ');
    this.tb = font.textBounds(this.sampleLine,this.x,this.y)

    this.smp = split(this.sampleLine, '\n');

    this.showText();
}

textLine.prototype.showText = function(){

      rect(this.tb.x-3,this.tb.y-3,this.tb.w+5,this.tb.h+5)

      console.log(this.smp.length)

  // for(var i = 0; i < activeMessages.length; i++){

        text(this.sampleLine,this.x,this.y);

  // }

};

function setup() {
    createCanvas(1000,550);
    textFont(font)
}

function draw() {
    background(200,200,200);
    new textLine("hello world! welcome to the\nworld of coding",200,200)
}

```

as seen the textbox only appears with the first line of code, i am experimenting with using a for loop to detect “\n” and multiplying the width by a number but im not finished yet

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 5, 2018, 5:40pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/15 "2018-08-05T17:40:04Z")

</div>

```auto
function preload(){
    font = loadFont('assets/Quicksand-Regular.otf');
}

var activeMessages = [];
var messageHistory = [];

function showMessages() {

    for(var i = 0; i < activeMessages.length; i++){
        //textBubble(activeMessages)
    }

};

function textLine(textin,x,y){
    textSize(15);
    this.x = x;
    this.y = y;

    this.lines = 1;
    this.height = this.lines*10;

    this.sampleLine = textin //split(textin,' ');
    this.smp = split(this.sampleLine, '\n');

    this.tb = font.textBounds(this.sampleLine,this.x,this.y);

    this.showText();
}

textLine.prototype.showText = function(){

        rect(this.tb.x-3,this.tb.y-3,this.tb.w+5,(this.tb.h+5)*this.smp.length)

        console.log(this.smp.length)

  // for(var i = 0; i < activeMessages.length; i++){

        text(this.sampleLine,this.x,this.y);

  // }

};

function setup() {
    createCanvas(1000,550);
    textFont(font)
}

function draw() {
    background(200,200,200);
    new textLine("hello world! welcome to the\nworld of coding\nim awesome im awesome im awesome im awesome im awesome",200,200);
}

```

But then: the width messes up!

---

<div class="post-metadata">

### Author: ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)
#### Post date: [August 5, 2018, 5:45pm UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/16 "2018-08-05T17:45:10Z")

</div>

So yeah i have a dilema

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [August 6, 2018, 1:37am UTC](https://discourse.processing.org/t/multi-line-text-box-needed/2318/17 "2018-08-06T01:37:24Z")

</div>

Try this. This link should give you some leads: [https://p5js.org/reference/#/p5/textAscent](https://p5js.org/reference/#/p5/textAscent)  
You can use the multitext html element. It didin’t work for you?

Kf

```auto
var fmtMsg;
var activeMessages = [];
var messageHistory = [];

function setup() {
  createCanvas(1000, 550);
  //textFont(font)
    fmtMsg=new textLine("hello world! welcome to the\nworld of coding\nim awesome im awesome im awesome im awesome im awesome", 200, 200);
}

function draw() {
  background(200, 200, 200);
  
  fmtMsg.showText();
}

function textLine(textin, x, y) {
  textSize(15);
  this.x = x;
  this.y = y;

  this.th = textAscent()+textDescent();  
  this.smp = split(textin, '\n');

  this.lines = this.smp.length;
}

textLine.prototype.showText = function() {
  
  for( i=0;i<this.lines;i++){
    text(this.smp[i],this.x,this.y+i*this.th);
  }

};

```