CODEWITHSUNDEEP
javascriptjqueryhtmljsfiddle
Jivenlans Tabien
Jivenlans Tabien

Reputation: 43

Expanding the textarea height

I created this codes to make automatic expanding of textarea height when the text inside exceeded to height of the textarea but this only works in jsfiddle but when i run this in my project this doesnt work. does anyone can help me? Thanks.

 $("#ta").keyup(function (e) {
        autoheight(this);
    });
    
    function autoheight(a) {
        if (!$(a).prop('scrollTop')) {
            do {
                var b = $(a).prop('scrollHeight');
                var h = $(a).height();
                $(a).height(h - 5);
            }
            while (b && (b != $(a).prop('scrollHeight')));
        };
        $(a).height($(a).prop('scrollHeight') + 20);
    }
    
    autoheight($("#ta"));
 #ta {
        width:250px;
        min-height:116px;
        max-height:300px;
        resize:none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ta"></textarea>

Upvotes: 0

Views: 123

Answers (2)

Ayush Sharma
Ayush Sharma

Reputation: 2107

It is working for me in IE 11 as well, try the below js fiddle link in IE -

https://jsfiddle.net/wp3wvuj2/3/

$(document).ready(function(){
$("#ta").keyup(function (e) {
autoheight(this);
console.log("log");
});
});

 function autoheight(a) {
if (!$(a).prop('scrollTop')) {
    do {
        var b = $(a).prop('scrollHeight');
        var h = $(a).height();
        $(a).height(h - 5);
    }
    while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));

Upvotes: 0

Swanand Taware
Swanand Taware

Reputation: 753

If you are using jquery then you have to load Jquery library and add your code in the document ready or window load. Below is the updated code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

</style>

<script>
$(document).ready(function(){
$("#ta").keyup(function (e) {
    autoheight(this);
    console.log("log");
});
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));
</script>

</head>
<body>

<textarea id="ta"></textarea>

</body>
</html>

Upvotes: 2

Related Questions