কমান্ড কাটা এবং অনুলিপি

Matt Gaunt

Document.execCommand() পদ্ধতির মাধ্যমে IE10 এবং তার উপরে 'কাট' এবং 'কপি' কমান্ডের জন্য সমর্থন যোগ করা হয়েছে। Chrome সংস্করণ 43 অনুযায়ী, এই কমান্ডগুলি Chrome-এও সমর্থিত।

ব্রাউজারে নির্বাচিত যেকোন পাঠ্য যখন এই কমান্ডগুলির একটি কার্যকর করা হয় তখন ব্যবহারকারীর ক্লিপবোর্ডে কাটা বা অনুলিপি করা হবে। এটি আপনাকে ব্যবহারকারীকে পাঠ্যের একটি অংশ নির্বাচন করার এবং ক্লিপবোর্ডে অনুলিপি করার একটি সহজ উপায় অফার করতে দেয়।

ক্লিপবোর্ডে কী অনুলিপি করা হয়েছে তা নির্ধারণ করতে প্রোগ্রাম্যাটিকভাবে পাঠ্য নির্বাচন করতে আপনি নির্বাচন API এর সাথে এটিকে একত্রিত করলে এটি অত্যন্ত কার্যকর হয়ে ওঠে, যা আমরা এই নিবন্ধে পরে আরও বিশদে দেখব।

সহজ উদাহরণ

উদাহরণের জন্য, আসুন একটি বোতাম যোগ করি যা ব্যবহারকারীর ক্লিপবোর্ডে একটি ইমেল ঠিকানা অনুলিপি করে।

আমরা আমাদের HTML এ ইমেল ঠিকানাটি একটি বোতামের সাথে যোগ করি যখন এটি ক্লিক করা হয় তখন অনুলিপি করা শুরু করে:

<p>Email me at <a class="js-emaillink" href="mailto:[e-mail]">[e-mail]</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

তারপরে আমাদের জাভাস্ক্রিপ্টে, আমরা আমাদের বোতামে একটি ক্লিক ইভেন্ট হ্যান্ডলার যোগ করতে চাই যেখানে আমরা js-emaillink অ্যাঙ্কর থেকে ইমেল ঠিকানা পাঠ্য নির্বাচন করি, একটি অনুলিপি কমান্ড কার্যকর করি যাতে ইমেল ঠিকানাটি ব্যবহারকারীর ক্লিপবোর্ডে থাকে এবং তারপরে আমরা নির্বাচন মুক্ত করি। ইমেল ঠিকানা যাতে ব্যবহারকারী নির্বাচনটি দেখতে না পায়।

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

আমরা এখানে যা করছি তা হল নির্বাচন API- এর একটি পদ্ধতি ব্যবহার করে, window.getSelection() পাঠ্যের 'নির্বাচন' অ্যাঙ্করে প্রোগ্রাম্যাটিকভাবে সেট করার জন্য, যেটি আমরা ব্যবহারকারীর ক্লিপবোর্ডে অনুলিপি করতে চাই। document.execCommand() কল করার পর আমরা window.getSelection().removeAllRanges() কল করে নির্বাচনটি সরিয়ে ফেলতে পারি। আপনি যদি নিশ্চিত করতে চান যে সবকিছু প্রত্যাশিতভাবে কাজ করেছে তবে আপনি document.execCommand(); কমান্ড সমর্থিত বা সক্রিয় না হলে এটি মিথ্যা ফেরত দেয়। আমরা execCommand() কে ট্রাই এবং ক্যাচ করে রাখি যেহেতু 'কাট' এবং 'কপি' কমান্ডগুলি কয়েকটি পরিস্থিতিতে একটি ত্রুটি ফেলতে পারে ।

'কাট' কমান্ডটি পাঠ্য ক্ষেত্রের জন্য ব্যবহার করা যেতে পারে যেখানে আপনি পাঠ্য বিষয়বস্তু সরাতে চান এবং ক্লিপবোর্ডের মাধ্যমে এটি অ্যাক্সেসযোগ্য করতে চান।

আমাদের HTML এ একটি টেক্সটেরিয়া এবং একটি বোতাম ব্যবহার করে:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

আমরা বিষয়বস্তু কাটা করতে নিম্নলিখিত করতে পারেন:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported এবং queryCommandEnabled

document.execCommand() কল করার আগে, আপনাকে নিশ্চিত করতে হবে যে এই APIটি document.queryCommandSupported() পদ্ধতি ব্যবহার করে সমর্থিত। উপরের আমাদের উদাহরণে আমরা সমর্থনের উপর ভিত্তি করে বোতাম নিষ্ক্রিয় অবস্থা সেট করতে পারি:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

document.queryCommandSupported() এবং document.queryCommandEnabled() এর মধ্যে পার্থক্য হল যে কাটা এবং অনুলিপি একটি ব্রাউজার দ্বারা সমর্থিত হতে পারে, কিন্তু যদি বর্তমানে কোন পাঠ্য নির্বাচন না করা হয় তবে সেগুলি সক্ষম হবে না৷ এটি এমন পরিস্থিতিতে উপযোগী যেখানে আপনি পাঠ্য নির্বাচন প্রোগ্রামেটিকভাবে সেট করছেন না এবং কমান্ডটি প্রত্যাশা অনুযায়ী কাজ করবে তা নিশ্চিত করতে চান, অন্যথায় ব্যবহারকারীর কাছে একটি বার্তা উপস্থাপন করুন।

ব্রাউজার সমর্থন

IE 10+, Chrome 43+, Firefox 41+, এবং Opera 29+ এই কমান্ডগুলিকে সমর্থন করে।

Safari এই কমান্ড সমর্থন করে না.

পরিচিত বাগ

• devtools থেকে queryCommandSupported() কল করা সর্বদা মিথ্যা ফিরে আসবে ।
• এই মুহুর্তে কাট তখনই কাজ করে যখন আপনি প্রোগ্রামগতভাবে পাঠ্য নির্বাচন করেন ।