Designing the input

p5.js Coding Questions
1

i want to create an input whose width and increases with respect to how much you’ve
written and to create another line… Can I do something like this???
I know I can do it for length… just by checking the input.value() an increasing the width accordingly… But what about multiple lines…

2

With textWidth() https://processing.org/reference/textWidth_.html you can check how wide a string would be on canvas. You would need to check when text is wider than width of your allocated area and split the text there, along the whitespace. And start a new line and new section of text.

It can be done. It’s not simple, but it’s not overly complicated either.

3

i did for the width one @SomeOne… But I have no clue as to if I can do this for a new line…, how to do that??

4

found it


         <br>
         <textarea rows = "5" cols = "60" name = "description">
            Enter details here...
         </textarea><br>
1 Like
5

Is this a Processing or a p5.js question? The answer is for Processing (Java Mode) and measuring the width of text. However, the follow-up is an html textarea input for p5.js (JavaScript).

6

image

1 Like
7

Screen Shot 2020-07-16 at 5.00.03 PM

1 Like