CODEWITHSUNDEEP
javascripthtmlcss
Andrew Timosca
Andrew Timosca

Reputation: 55

How to make textbox resize with new lines

I have this code in JS and it mostly works. If I input dummy text it will expand but when I hit enter for a new line, it doesn't expand at all. Also I got this code from another user so I can't take credit for it. I'm not that well versed in JS either.

//This span is used to measure the size of the textarea
//it should have the same font and text with the textarea and should be hidden
var span = $('<span>').css('display','inline-block')
                      .css('word-break','break-all')
                      .appendTo('body').css('visibility','hidden');
function initSpan(textarea){
    span.text(textarea.text())
        .width(textarea.width())
        .css('font',textarea.css('font'));
}
$('textarea').on({
    input: function(){
        var text = $(this).val();      
        span.text(text);      
        $(this).height(text ? span.height() : '1.1em');
    },
    focus: function(){           
        initSpan($(this));
    },
});

Upvotes: 1

Views: 253

Answers (1)

jcubic
jcubic

Reputation: 66488

In html every whitespace is replaced by single space except for the pre tag (and appropriate css rules) to fix it just replace span with pre tag:

var pre = $('<pre>').css('display','inline-block')
                    .css('word-break','break-all')
                    .appendTo('body').css('visibility','hidden');
function initPre(textarea){
    pre.text(textarea.text())
        .width(textarea.width())
        .css('font',textarea.css('font'));
}
$('textarea').on({
    input: function(){
        var text = $(this).val();      
        pre.text(text);
        $(this).height(text ? pre.height() : '1.1em');
    },
    focus: function(){           
        initPre($(this));
    },
});

JSFIDDLE

Upvotes: 1

Related Questions