ورود ثبت نام

کلیپ بورد جاوا اسکریپت

کلیپ بورد جاوا اسکریپت
کلیپ بورد جاوا اسکریپت یکی از ابزار های جاوا اسکریپتی است که به شما اجازه میدهد به سادگی بتوانید متن های خود را در کلیپ بورد خود کپی کنید این کتابخانه حجم بسیار کم و نیازی به فلش پلیر برای اجرا ندارد و به مخاطبین شما اجازه میدهد که بتوانند به راحتی متون مورد نظرشان را کپی کنند

نصب clipboard js

برای نصب این کتابخانه دو روش وجود دارد: 1 - نصب با استفاده از پکیج منیجر NPM 2 - با استفاده از پکیج منیجر BOWER خب بریم سراغ نصبش:
    // نصب با npm
    npm install clipboard --save

    // نصب با bower
    bower install clipboard --save
راه دیگری هم وجود دارد دریافت پروژه از گیت هاب و قرار دادن فایل clipboard.min.js به صورت دستی در پروژتون بعد از نصب میبایست قبل از بسته شدن تگ body خط زیر را قرار دهید:
    <script src="path/to/clipboard.min.js"></script>
حالا وقت اون رسیده که کلیپ بورد رو ایجاد کنیم برای اینکار ابتدا کلاس clipboard را به المان ها اضافه میکنیم:
    $( document ).ready(function() {
        var clipboard = new Clipboard('.clipboard');
      });
برای استفاده از آن باید در سند html خود از data-clipboard-text استفاده کنید به مثال زیر توجه بفرمایید:
    <button class="clipboard"
   data-clipboard-text="این متن کپی خواهد شد">
  کپی متن
</button>
یا میتوانید از data-clipboard-target استفاده کنید:
    <span id="copy">این متن کپی خواهد شد</span>

<button class="clipboard" data-clipboard-target="#copy">
  کپی متن
</button>
خب ما میتوانیم وضعیت موفق بودن یا با ارور همراه بودن اون رو به سادگی با استفاده از success و error بررسی و مرتفع کنیم:
    $( document ).ready(function() {
        clipboard.on('success', function(e) {
          $(e.trigger).text("کپی شد!");
          e.clearSelection();
          setTimeout(function() {
            $(e.trigger).text("کپی");
          }, 2500);
        });
      
        clipboard.on('error', function(e) {
          $(e.trigger).text("مشکل در کپی در سافاری");
          setTimeout(function() {
            $(e.trigger).text("کپی");
          }, 2500);
        });
      });
بعضی از مرورگر ها به دلیل ساپورت نکردن برخی API های لازم برای clipboard js مانع از عملکرد صحیح آن میشوند. به طور مثال متن سلکت شده میماند اما کپی نمیشود به همین خاطر بهتر است وضعیت آن را بررسی کرده و در صورت عدم موفقیت به کاربر اطلاع داده شود تا کپی را دستی انجام دهد. امیدوارم این آموزش مورد استفادتون قرار گرفته باشه

0 2006

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

کاربردها و فرصت های شغلی زبان برنامه نویسی جاوا

زبان برنامه نویسی جاوا در ا...

ادامه مطلب


banner

ساخت جداول گوناگون در css

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

ادامه مطلب


banner

کتابخوان های الکترونیکی برتر

به نام خدا ؛ تاحالا شده وقتت ت...

ادامه مطلب


banner

لاراول 6

انتظار ها به سررسید و سرانجام...

ادامه مطلب


banner

padding ها در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


RSS RSS

نظرات ارزشمند خود را در مورد وبسایت با ما در میان بگذارید

© کلیه حقوق مادی و معنوی متعلق به تیم برنامه نویسی Mosquito Network می باشد