Text input with multiple lines?

Help & Support
,
1

Hey, Everyone,

When we input a text block, is there any way we see the entire text to edit a block of texts?

Currently the text is not wrapped to multiple lines, but instead it disappears?

Any solution for this?

2

Hi @lenvanthis! I think the option Wrap Lines does this, but I’m not sure.

image
image628×1562 71.3 KB

3

That is to show a given text. What I am looking for is to wrap lines in text input. Currently it shows as one line only for text input. There is no option for wraplines in input.js. I have added this.element.wrapLines = true; this.element.autoHeight = true; in input.js. But it didn’t work…

4

What code/ library/ project are you using for text input?

5

This is a project for users to share their stories. Private project.

6

What kind of text block do you mean? Can you show a printscreen please?

7
8

https://playcanvas.com/project/1012423/overview/block-input

9

If you are interested in, I can give you write permission to the above project to mend it. Or give me better input.js… Thank you!!

10

You can’t do multiple lines with an input element. You have to use text area instead.

11

That sounds really promising. But I don’t know where exactly I have to change with given input.js. Sorry for my ignorance. I have change this.element.type = ‘textarea’ but it doesn’t help and I am stuck. Thank in advance.

12

http://developer.playcanvas.com.s3-website-eu-west-1.amazonaws.com/ru/tutorials/htmlcss-ui/

This is for self-reference.

13

OK. I made something for myself. Sharing my project in case somebody might get some use out of it. PlayCanvas 3D HTML5 Game Engine

14

Thanks for sharing! Below the script.

var InputTextarea = pc.createScript('inputTextarea');

InputTextarea.prototype.initialize = function () {
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    style.innerHTML = this.getCSS();
    document.head.appendChild(style);

    // Add the HTML
    this.container = document.createElement('div');
    this.container.classList.add('container');
    this.container.innerHTML = this.getContent();
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.container);   
};

InputTextarea.prototype.getContent = function() {  

    var html = ' ';
        html += '<textarea rows = "60" cols = "50"  ';
        html += ' Enter details here... </textarea> ';
        html+= '  ';
    return html;
};

InputTextarea.prototype.getCSS = function() {  

    var css = '.container {  position: absolute; top: 600px; right: 200px;} ';
    return css;
};
1 Like