CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fergoso
Fergoso

Reputation: 1582

Textarea expand its width while the user is typing

Is there a way to make a textarea expand its width while the user is typing? Basically I'm using a border for the textarea therefore I need the WIDTH of the textarea to be only to the length of the longest line. So it looks nice and tidy.

Note: I'm allowing the user to change the font size of the textarea.

This is what I have but does not do what is required.

$(document).on("click blur keyup", ".fT", function() {
      var newWidth = ($('#tfd').val().length)*10;
      $('#tfd').width(newWidth);
});

I'm not concerned about the HEIGHT of the the textarea. I only need to fit the textarea to the text inside.

Upvotes: 0

Views: 492

Answers (4)

llundin
llundin

Reputation: 381

Here is an example which is triggered while typing.

http://jsfiddle.net/kvc0L4ut/19/

<script>
    function expand(el, e){
        var text = el.value.split("\n");
        var minColSize = 19;
        for(var i=0; i < text.length; i++){
            minColSize = (text[i].length > minColSize) ? text[i].length : minColSize;
        }
        el.cols = minColSize + ((e.which == 8 && minColSize != 19) ? -1 : 1);
    }
</script>

<textarea onkeydown="expand(this, event)"></textarea>

Upvotes: 0

abhishek bagul
abhishek bagul

Reputation: 263

expanding the text area when user types is too easy.. use the following html

<textarea id="inbox" onclick="expand()" style="width: 300px; height: 250px;"></textarea>

And the following js script:

function expand(){
var box = document.getElementById('inbox');
box.style = "width: 500px; height: 500px;"
}

and if you think to exapand the textbox when someone types then use oninput =)

Upvotes: 0

MRSoft
MRSoft

Reputation: 77

If I understand correctly You want to achieve something similar to this:(jsfiddle deleted, see fiddle below)

It uses hidden div to calculate the width of the textarea based on the text content. The textarea has padding:0 so the width is strictly linked to it's content as You wanted. The div styles "min-width" and "max-width" defines the minimum and maximum width that textarea can collapse/expand to.

EDIT: The problem You pointed occurs due to the line wrapping in div. To avoid it You can eventually use CSS white-space: pre-line; propoerty. I updated (attached) example fiddle.

$("#t1").on("keyup", function() {

  $("#d1").text($(this).val());
  $(this).css("width", $("#d1").css("width"));
  $(this).css("height", $("#d1").css("height"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="t1" style='min-width:100px;min-height: 100px; padding:0; font-size:14px'>

</textarea>

<div id="d1" style='max-width:200px;min-height:20px;white-space: pre-line; float:right;font-size:15px; display:none'>

</div>

Upvotes: 1

abuani
abuani

Reputation: 180

It looks like the biggest issue has to do with your selector. I have provided a JSBin illustrating what you're trying to achieve, however if you can create one with your exact scenario I can further help.

Your logic is correct, but the $(document).on("click blur keyup", ".fT") isn't being registered to the appropriate selector. Try changing that to:

$(".fT").keypress(function() { // function handler here //; }

Here's the current JSBin example to illustrate this:

http://jsbin.com/jogixotoca/5/edit?html,js,output

Upvotes: 0

Related Questions