How do I have text go to the start when exceeding the width of `textarea`?
Yeah, basically what the question and image entails. Is there a way to have writing go all the way back there when someone types more than the width of the
textarea?
50 Replies
So I suppose you could imagine I want something like this:
(Also, yeah, I need that text on the top left to be there)
wait, you want the text from inside the textarea to go outside the textarea?
Yeah
Is that possible?
Or atleast "morph" the textarea to look like that
why do you even want to do that?
that goes against all logic and reasoning
why do you want the text to arbitrarily escape out of the box?
Because on the terminal, that's how it works and I'm trying to create something similar to that
can you show me which terminal does that?
I think what you're looking for, is a fixed placeholder text inside your text area. Then you 'emulate' a terminal look.
i think we need more context, because if what he's saying is right, it makes no sense
if what you are saying is right (aka: the prompt), then it is harder than it looks
if you're building a terminal, you're better off rewriting the typing logic using javascript, and that's a nightmare
if you want to emulate a terminal, i strongly recommend you to use xterm.js
Never said it was easy. I'm just trying to translate the original request. Haha.
Because I agree with you. If that's not what he wants to do, it doesn't make any sense at all
i know, but the question is worded in such a weird way
Absolutely
lets see what he says
because implementing a terminal-like thing is way way harder than it looks, so, using something that already exists and is battle tested is a lot better
i used xterm.js before, and it works amazing
Hypothetically speaking, if the prompt doesn't need to come back every time, is it possible to have a 'sticky' first line placeholder text there? Position absolute to place the text, but not sure how you could have padding only on the first line.
no, its a text area
everything moves
you need to write your own logic
it is leagues and bounds easier to use xterm.js
all you do is .write and dump a ton of ansii escapes
done!
you can also read input from it, and react to it
you also gain support for colors, positioning, cursor clicks and more
it is the terminal emulator used by many applications, including vscode
Right. But I just meant... if all they want is an initial 'prompt' that stays in place and the text flows around it, then maybe all of that is overkill
it is overkill, but you know what's even more overkill? having to write your own logic
Haha, good point
imagine this: there's the prompt and you typed 0 characters
you press backspace
you have to handle that, to prevent deleting the promot
prompt
now, you press enter after typing 0 characters
you need a new prompt
imagine this: i select part of the text and try to delete it, with prompts and all
you have to actively fight against me using the textarea
what the chrome and firefox console do is to provide an input textarea and an output area
which is a less overkill and less impressive way to do it, but much much easier
you can then do whatever you want on the output area: including spinning pink fluffy unicorns dancing on rainbows
Stack Overflow
How do I add permanent text before user enters a text in html texta...
I want to add a permanent text in html textarea before user enters a text like in cmd where path is written before you write any code.
How can I achieve this?
The first 2 snippets are doing it
So you can do it with a position absolute, but then not a padding like I said, but a text-indent. Which makes sense of course.
thats not repeatable and doesnt behave like a terminal
however, i will admit: i didnt knew that the pseudoelements worked with textareas
Like I said... if all they want is a fixed first text and then have the rest of the text flow around it... terminal behavior would be overkill
So this could be a solution
But we've done a lot of assumptions based on the initial request. Hahaha
yes, for 1 single "line"
i think a mixture of my solution and the ::before is the best
this one
Now, to go back to the original request... if they want the 2 different colors like in the screenshot... I'm out of options. Haha
my solution works with that
I'm not sure what you mean with this output area. But I'd like to know more about it
press f12 and then go to the console tab
in a browser window
Right, I know about the console.
the way it works is as i said: input at the bottom, output at the top
Oh yeah, that's exactly what I'm trying to simulate
Also, sorry for the late reply guys
better late than never
No worries, we were having fun guessing what you're looking for. Haha
See
yeah, just do what i said
save your sanity
Ah okay
Yeah, I do value that lol
then just copy what chrome and firefox do
you can use the technique he sent so the text wraps around in the input
but, if you want to emulate a full terminal (ssh over socket, for example), then xterm.js is your only option
The terminal text is not escaping its container. The starting point of this text is pushed to the right due to the existence of the prompt. Subsequent lines of the same command or output don't have the prompt until the next command. If you are emulating the terminal, just place a prompt in there. Regular text flow takes care of the rest. This is not a CSS issue at all.
You mean I put the prompt in the
textarea and start after the prompt?
What if the user decides to delete the prompt?That would be a Javascript issue to block the deletion if the prompt is actually in the textarea. It would probably be better to keep the prompt in a separate element that absolutely positioned and indent the textarea to prevent any text from going in the space that the prompt occupies.
Did you check the SO link that I sent? I think it explains pretty well how you can do it with just a pseudo-element and text-indent, if all you want is this initial prompt. Of course, if you want the prompt to come back after the user presses enter, like in a terminal, it's a whole different story.
https://codepen.io/chooking/pen/GRLvRrE
This is the general idea. The implementation gets a bit more complex when there are more new prompts, since you would need to position their height correctly. Also, setting the proper indent woud be easier using a fixed width font, which I did not do in this example. One trick you could use is a separate textarea for each new prompt. Hide the borders and outline to make them all look like one entity. That would make placing the prompt relative to the textarea simple. The challenge of calculating the height for the next prompt is you don't know in advance how many lines of text the command and/or output will take, so knowing font size and line height is not sufficient.
The challenge of calculating the height for the next prompt is you don't know in advance how many lines of text the command and/or output will take, so knowing font size and line height is not sufficient.That is true so perhaps the
position: absolute method isn't the way to go? I'll check try out your other method though!
it's a whole different storyOh damn, is that bad or good?
You can use position:absolute if you spawn a new pair of prompt and textarea along with their wrapper for each command. The next wrapper will appear right below the previous, and the prompt would be absolutely positioned relative to the wrapper position.
But making this work requires tricks for automatic height on the textarea. One option is to use a div with the contenteditable attribute instead of using a textarea. This will also allow you to actually place colored text in the div, and you would just use JS to avoid erasing prompt. Upon further reflection, I think this is the simplest solution.
If you are already dealing with js, you can use a para with
float: left; on prompt text
https://codepen.io/Nandesh-S/pen/MWRvYbaI created a demo that does everything except for preventing deletion of the prompt. I decided to use inline-block and place the prompt inside the container. https://codepen.io/chooking/pen/MWRvwEQ
oo okay, thanks a lot!