قطعه کد تغییر ارتفاع 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>

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.

cp-codfk

نظرات ثبت شده بدون دیدگاه

توضیحات پیشنهادی نظرات اشتراک