illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

2 2290 ۱۲ دی ۹۳

در این مطلب میخوام یک پلاگین 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 اتوماتیک میشه. این ارتفاع قابل تغییر هست و میتونین با توجه به نیاز کمتر و یا بیشترش کنین.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    سوران(۱۲ دی ۱۳۹۳)

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

    • ‏‏
      محمد اسفندیاری(۱۳ دی ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram