CODEWITHSUNDEEP
htmlcss
Nitzan Tomer
Nitzan Tomer

Reputation: 164129

How to make a textarea behave like an input when the text in it reaches the end of the line?

I have a one line (row) textarea and I want it to behave like an input when the text in it reaches the end of the line.

If this is my textarea:

--------------
|input text h|
--------------

The next character(s) will cause the textarea to do this:

--------------
|ere         |
--------------

The rest of the text is in the line above which is hidden because my textarea has rows="1".

What I'd like it to do is:

--------------
|ut text here|
--------------

Which is how an input would have behaved.

Here's a codepen for it to play around with: https://codepen.io/anon/pen/zEJVWW

I tried to change the overflow and overflow-x css attributes but that had no effect.
Any ideas?

(I wasn't able to find a question about this, but probably because I wasn't sure what exactly to search for, if it exists I'd be happy to mark as duplicate.)

Edit

The reason I want to do this is that my textarea should behave as an input until the user presses the enter key (or something similar).
That is, I want to be the one who controls if and when the line breaks into a new one.

Upvotes: 3

Views: 2223

Answers (2)

caramba
caramba

Reputation: 22480

Something like this maybe:

.wrapper {
  padding: 5px 2px;
}

.box {
  width: 60px;
  outline: 0;
  border: 1px solid black;
}

.box2 {
  resize: none;
}

/* added only these styles to the ones you had */
textarea {
  height: 15px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}
<div class="wrapper">
  input: <input class="box box1" value="input text h" />
</div>
<div class="wrapper">
  textarea: <textarea class="box box2" rows="1">input text h</textarea>
</div>

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 56410

I am not sure if my understand is correct, but if you change the CSS class to

.box2 {
  resize: none;
  overflow-x: hidden;
  word-wrap:unset;
}

So we can remove the word wrapping and set overflow-x:hidden and it will behave like an input element, please let me know if this is whats needed.

Codepen Demo

Upvotes: 2

Related Questions