textarea-autosize : پلاگین jQuery برای ارتفاع textarea

- visibility ۲ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام textarea-autosize رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر کاری کنید که زمانی که کاربر در textarea میخواد enter بزنه که بره به خط بعد ، ارتفاع هم به همون میزان اضافه بشه و هرچقد که کاربر Enter بزنه ، ارتفاع textarea به همون میزان زیاد میشه.

میبینید که هنگامی که در درون textarea ، چند Enter بزنین ، ارتفاع به همون میزان زیاد میشه و scroll نمیخوره. در صورتی که اگر از این پلاگین استفاده نکنین ، با Enter زدن اسکرول میخوره.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.textarea_autosize.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در پایان هم یک تگ script قرار دادیم ، که کدهای خودمون رو درونش بنویسیم.

اگر تا همینجا در مرورگر مشاهده کنید ، زمانی که در textarea ، شروع به زدن Enter میکنیم ، از همون ابتدا اسکرول ایجاد میشه و اتفاق جالبی نیس. برای اینکه این مشکلو برطرف کنیم ، یا میتونیم ارتفاع textarea رو خودمون زیاد کنیم ، که کار خیلی جالبی نیس و یا اینکه از این پلاگین استفاده کنیم که ارتفاع اتوماتیک زیاد بشه.

برای اینکار ابتدا باید یک textarea قرار بدیم و کلاس js-auto-size رو بهش نسبت بدیم. برای هر textarea که میخواین از این ویژگی بهره ببره ، همین class رو قرار بدین. بعدش با استفاده از خاصیت rows مشخص کردیم که در ابتدا یک ردیف وجود داشته باشه. بصورت زیر :

حالا کدهای CSS زیر رو به تمامی textarea ها نسبت میدهیم :

برای مطالعه بیشتر در مورد box-sizing میتونین به این لینک برین. در قسمت min-height باید کمترین ارتفاع textarea رو مشخص کنید که باید اون رو با توجه به سایز فونت و padding ها و ... محاسبه کنید. در قسمت max-height هم باید بیشترین ارتفاعی که textarea تا اون لحظه اسکرول نمیشه رو مشخص کنید. در بالا 94 قرار دادیم. یعنی اگه ارتفاع textarea بیشتر از 94px شد ، اسکرول تازه شروع میشه.

برای اینکه کارایی که کردیم تاثیر داشته باشه و پلاگین رو هم درگیر کنیم ، باید کد زیر رو در تگ script پایانی وارد کنیم:

با اینکار تمام textarea هایی که کلاس js-auto-size دارند ، توسط این کد انتخاب میشن و این پلاگین به اونا نسبت داده میشه و ارتفاعشون تا 94px اتوماتیک میشه. این ارتفاع قابل تغییر هست و میتونین با توجه به نیاز کمتر و یا بیشترش کنین.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

comment دیدگاه کاربران

ولله اینی که من دیدم بعد از چند اینتر اسکرول میشه دوباره. من توی کروم آخریم نسخه امتحان کردم دموی شما رو

محمد اسفندیاری

با سلام
اگه توضیحاتم رو درست خونده باشین ، نوشتم تا ارتفاع 94 پیکسل اسکرول نمیشه ، بعد از اون اسکرول میشه
اگه میخواین میتونین اون 94 رو بیشتر کنین………اگه میخواین هیچ محدودیتی برای اون نزارین ، کلا خاصیت max-height رو بردارین
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.