How to put a working textarea inside another working textarea ?

Question

I have a program where I want to run an sdk from the main textarea but I need the second interior textarea to run the input process.

I've looked at a few resources and the primary answer is that you can't.
Or as some say

<textarea> sdk interior textarea
&lt;textarea&gt;input textarea&lt;/textarea&gt;
</textarea>

but this produces nothing but one working textarea and only the words

<textarea>input textarea</textarea>

I did an option by basically overlaying a smaller textarea over a larger textarea as far as css to have two working textareas but they didn't really work as I was intending..

I'm almost certain it "can be done" in JavaScript itself but to date I haven't found a suitable answer in any forum.

Answer 1

I don't really get it, why your external container needs to be a text area too, or how that would even work. Text area contains characters that can be edited interactively... But if it could include also any arbitrary object, component, element, how would they move when you insert characters before them?
I think the same what Jay suggested, external container should be a DIV

Answer 2

The outer is sdk textarea interacts with the inner textarea as a multiline input textarea

Rough Example:

eg .. python sdk outer or primary and inner as an input textarea or maybe another sdk secondary.

Answer 3

Tibor Santa it really doesn't matter but I saw someone do something similar and it looked interesting 🤔 and logically it looked like it shouldn't work that way.

Answer 4

The way the DOM works it wont let you combine textarea. However you can have more than 1 textarea element and style it to look like a single element.
1: Put it in a div container.
2: Remove the border style from the textarea.
3: Style the container look like a single text area.

https://code.sololearn.com/WWU6kFF32Yi1/?ref=app

Answer 5

BroFar why do you need the outer container to be editable by user interaction?
I mean you can always change the content of a div with JavaScript...
I find this rather confusing from UX perspective.

Answer 6

Okay the textarea is only used to take input or display text. Scripts, Sdk, API are not contained in the textarea. Scripts are either embedded in the document or referenced in an external document. You can take input through the textarea and store the data in an eternal document or browser storage, and retrieve data from documents or storage. Via JavaScript or a different language. You can output the data to the console, alert or the visible viewport with the use of visible elements.

Perhaps what you think is another text area is actually just a div container with a visible element. Such as canvas. Like Skulpt.

You can style the div to look like what ever you want. A simple box or a cool glass computer screen.

Answer 7

Bob_Li that's definitely an option .
https://code.sololearn.com/Wn7rwKBg88fS/?ref=app

Answer 8

What purpose does it serve to have the text area inside the text area?

Answer 9

I'm invested in this now lol.
We have bare bones textarea inside a textarea. What is the next step?
https://code.sololearn.com/W2A125cz7m5e/?ref=app

Answer 10

BroFar
if the inner textarea is going to be uneditable, why use a textarea?
maybe a pre or code block would be better?

Answer 11

I have the same thought as Bob_Li - there should be a single point of interaction.
(For a brief moment, think about Iphone design. It has a single button. For user experience this makes it trivial what to press.)

You can always position (or reposition) your elements as required with CSS.

Answer 12

Bob_Li the outer area you mentioned as contenteditable but would actually be a structured tree language where as the textarea would be where a drop in PHP script would be added later and ran for expected specs and passed to the outer div .. However in thinking you added the possibility of tweaking the structured tree language which is actually a good thing.

textarea as a multiline input but running a specific code to obtain said results passing to structure tree language.

Answer 13

BroFar I can't picture what you are trying to achieve. You mentioned that you saw someone doing something similar. Can you provide the example?

Answer 14

Chris Coder if I could I would but I created a quick example pieced together from other resources

https://code.sololearn.com/WyTlmMSFyuP4/?ref=app

Answer 15

BroFar
maybe it was something from Stackoverflow?

https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea#:~:text=The%20only%20way%20to%20do,tag%20via%20CSS%20positioning%20tricks.

Answer 16

Chris Coder
That's an absolute trick 😎

Answer 17

Chris Coder The interior textarea is suppose to be a multiline input and the outer or larger textarea, in this case the div contenteditable, is suppose to run an sdk language script eg.. Basic vSphere SDK for Perl Script and the interior textarea is planned as PHP.

This is only an example idea in the works ( brainstorming process )

Answer 18

Yes like in my input output example above you can pass text to the other textarea. Or to the div in the same way.

Answer 19

Tibor Santa I actually need the textarea editable as input and the outer to run the sdk non-editable .. ( inner ) similar thought of ( an input ) to control ( the values ) necessary to operate within the sdk ..

ideally say I run a test of several numbers in PHP script and want the values to be on crosspoints of a grid in Perl or Bash or Python or even R and eventually end up via canvas output displaying said grid graphically.

Answer 20

Tibor Santa the single point interacted is the PHP script in the inner textarea