قطعه کد تغییر ارتفاع textarea با زیاد شدن متن در جاوا اسکریپت

شاید بخواهید textarea ای در یک سند HTML ایجاد کنید که بتواند بصورت خودکار، با زیاد شدن متن داخلش، تغییر اندازه داده و درازتر شود. در اینجا برای انجام این کار هم روش جاوا اسکریپت خالص و هم روش استفاده از جی‌کوئری آورده شده است. استایل زیر نیز بین دو روش، یکسان است.

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

روش اول: جاوا اسکریپت خالص

function adjust_textarea(fk) {
    fk.style.height = (fk.scrollHeight) + "px";
}

<textarea onkeyup='adjust_textarea(this)';></textarea>

داخل رویداد onkeyup، تابع adjust_textarea فراخوانی شده است که المنت textarea را دریافت می‌کند. سپس مقدار ارتفاع آن را، برابرا با ارتفاع اسکرول عمودی خود قرار می‌دهد.

روش دوم: با جی کوئری

در اینجا نیز همانند قبل، از رویداد keyUp و ارتفاع اسکرول استفاده شده است.

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

$(function() {
	$("#fk").keyup(function (e) {
		autoheight(this);
	});
});

<textarea id="fk"></textarea>

فرق این کد با کد قبل در این است که اینجا، افزایش ارتفاع بصورت نرم رخ می‌دهد؛ تا آن تیک (لگ) که در روش اول دیده می‌شود، از بین برود. البته همین کد را نیز می‌توان با جاوا اسکریپت خالص نوشت که کمی دردسر خواهد داشت.