کپی کردن مقدار در حافظه (Clipboard) با جاوا اسکریپت

شاید برای شما هم پیش اومده باشکه بخوایین یه مقداری رو در کلایپ بورد (Clipboard) ذخیره بکنین، خب برای این کار میشه کد جاوا اسکریپت نوشت و مقدار فیلد یا مقدار متنی المان موجود در صفحه رو در کلایپ بورد ذخیره کنین. اما در پروژه هایی که تعداد این کار زیاد میشه و نوع المان های صفحه فرق میکنه نوشتن کد اسکریپت برای هرکدام از المان ها کمی خسته کننده میشه!

راه حل رفع این مشکل استفاده از پلاگین clipboard.js در پروژه تونه، این API خیلی سبک (۳kb) و خیلی ساده نوشته شده و میتونین با خیال راحت در صفحات سایت و پروژه وب ازش استفاده بکنین و مطمئن باشید که تو همه مرورگرها اجرا میشه (Cross Browser).

خب! برای استفاده از این API کافیه فایل اسکریپت رو تو صفحه لود کنین:

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

چند مثال از کپی کردن و برداشتن (Cut) مقدار از فیلد متنی (input) یا فیلد های چندخطی (Textarea)

/* متن چندخطی - برداشتن
<textarea id="bar">hello</textarea>
   <button class="copy-button" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
*/
var clipboard = new Clipboard('.copy-button'); 
/* فیلد متنی – کپی کردن
<input id="foo" type="text" value="hello">
   <button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
*/
var clipboard = new Clipboard('.copy-button');

مثال ۲ : کپی کردن مقدار متنی یک المان HTML (یا innerHTML)

// مقدار متن داخلی یک المان را کپی میکند

var clipboard = new Clipboard('.copy-button', {   

     target: function() {        

           return document.querySelector('#copy-target');    

     }

}); 

// متن دلخواه شما

var clipboard = new Clipboard('.copy-button', {    
    text: function() {
        return 'clipboard.js is awesome!';
    }
});

رویدادهای (Event) این API

var clipboard = new Clipboard('.btn'); 

// اجرای فانکشن در صورت موفق بودن عملیات
clipboard.on('success', function(e) {
    console.log(e);
}); 

// اجرای فانکشن در صورت بروز خطلا در حین عملیات
clipboard.on('error', function(e) {
    console.log(e);
});

 

نظر بدهید

ایمیل شما منتشر نخواهد شد. Required fields are marked *

شما می توانید استفاده نمایید از HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>