How to disallow input when text fills the width and height of a textarea?

Issue

I need to use a textarea inside a div:

<div class="text-container">
    <textarea type="text"></textarea>
</div>

When i set the container to:

.text-container {
    width: 400px;
    height: 400px;
}

for example and set the textarea to:

.text-container textarea {
    widht: 100%;
    height: 100%;
}

the textarea will be as big as the div. the problem is i dont want a scroll or anything like it. if the text is filling the whole textarea i dont want to allow more text inputs.

How can i achieve that?

Solution

Use maxlength attribute combined with resize: none; and overflow: hidden;. The maxlength should be updated by javaScript when textarea is resized.

textarea {
  resize: none;
  width: 200px;
  height: 100px;
  overflow: hidden;
}
<textarea maxlength="160" placeholder="type max 160 characters"></textarea>

Answered By – Dariusz Sikorski

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.