javascript - bangla - জাভাস্ক্রিপ্ট কোড



কিভাবে আমি জাভাস্ক্রিপ্ট ক্লিপবোর্ডে অনুলিপি করব? (20)

ক্লিপবোর্ডে পাঠ্য কপি করার সেরা উপায় কী? (বহু-ব্রাউজার)

আমি চেষ্টা করেছি:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

কিন্তু ইন্টারনেট এক্সপ্লোরার এ এটি একটি সিনট্যাক্স ত্রুটি দেয়। ফায়ারফক্সে, এটি unsafeWindow is not defined বলে unsafeWindow is not defined

ফ্ল্যাশ ছাড়া একটি চমৎকার কৌশল: ট্রেলো ব্যবহারকারীর ক্লিপবোর্ড অ্যাক্সেস কিভাবে করে?

https://src-bin.com


Answer #1

সংক্ষিপ্ত বিবরণ

ক্লিপবোর্ডে অনুলিপি করার জন্য 3 টি প্রাথমিক ব্রাউজার API রয়েছে:

  1. Async ক্লিপবোর্ড API [navigator.clipboard.writeText]
    • Chrome 66 এ উপলব্ধ টেক্সট-ফোকাস অংশ (মার্চ 2018)
    • অ্যাক্সেস অ্যাসিঙ্ক্রোনাস এবং জাভাস্ক্রিপ্ট Promises ব্যবহার করে , তাই নিরাপত্তা ব্যবহারকারীর প্রম্পট (যদি প্রদর্শিত হয়) লিখিত হতে পারে পৃষ্ঠাতে জাভাস্ক্রিপ্টকে বাধা দেয় না।
    • টেক্সটটি একটি পরিবর্তনশীল থেকে সরাসরি ক্লিপবোর্ডে অনুলিপি করা যেতে পারে।
    • শুধুমাত্র HTTPS উপর পরিবেশিত পৃষ্ঠাগুলিতে সমর্থিত।
    • ক্রোম 66 টি সক্রিয় ট্যাবে পৃষ্ঠাগুলি অনুমতি প্রম্পট ছাড়াই ক্লিপবোর্ডে লিখতে পারে।
  2. document.execCommand('copy')
    • সর্বাধিক ব্রাউজার ~ এপ্রিল ২015 হিসাবে এটি সমর্থন করে (নীচের ব্রাউজার সমর্থন দেখুন)।
    • অ্যাক্সেস সিঙ্ক্রোনাস হয়, অর্থাৎ সম্পূর্ণ হওয়া পর্যন্ত পৃষ্ঠায় জাভাস্ক্রিপ্ট বন্ধ করে এবং ব্যবহারকারীর সাথে কোনও সুরক্ষা অনুরোধের সাথে ইন্টারঅ্যাক্টিং অন্তর্ভুক্ত থাকে।
    • টেক্সট DOM থেকে পড়া এবং ক্লিপবোর্ডে স্থাপন করা হয়।
    • পরীক্ষার সময় ~ এপ্রিল ২015 ক্লিপবোর্ডে লেখার সময় শুধুমাত্র ইন্টারনেট এক্সপ্লোরারকে অনুমতি দেওয়ার অনুরোধগুলি হিসাবে উল্লেখ করা হয়েছিল।
  3. কপি ইভেন্ট overriding
    • কপি ইভেন্ট overriding উপর ক্লিপবোর্ড API ডকুমেন্টেশন দেখুন।
    • কোন অনুলিপি ইভেন্ট থেকে ক্লিপবোর্ডে যা প্রদর্শিত হয় তা সংশোধন করতে আপনাকে অনুমতি দেয়, প্লেইন পাঠ্য ব্যতীত অন্য কোন ফর্ম্যাট অন্তর্ভুক্ত করতে পারে।
    • এখানে সরাসরি আচ্ছাদিত নয় কারণ এটি সরাসরি প্রশ্নের উত্তর দেয় না।

সাধারণ উন্নয়ন নোট

ক্লিপবোর্ড সংক্রান্ত কমান্ডগুলি কনসোলের কোডটি পরীক্ষা করার সময় কাজ করার আশা করবেন না। সাধারণত পৃষ্ঠাটি অ্যাক্টিভ (অ্যাসাইন ক্লিপবোর্ড API) সক্রিয় করতে হবে অথবা ক্লিপবোর্ড অ্যাক্সেস করার জন্য ব্যবহারকারীর ইন্টারঅ্যাকশন (উদাহরণস্বরূপ একটি ব্যবহারকারী ক্লিক) অনুমতি দিতে হবে (ক্লিপবোর্ডটি অ্যাক্সেস করতে) আরও বিস্তারিত জানার জন্য নীচের দেখুন।

Async + Fallback

নতুন অ্যাসিনক ক্লিপবোর্ড API এর জন্য ব্রাউজার সমর্থনের স্তরটির কারণে আপনি সম্ভবত ভাল ব্রাউজার কভারেজ পেতে document.execCommand('copy') কম্যান্ড document.execCommand('copy') পদ্ধতিতে ফাল্যাকব করতে চান।

এখানে একটি সহজ উদাহরণ:

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

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

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>

মনে রাখবেন যে এই স্নিপেটটি স্ট্যাকওভারফ্লো এর এম্বেডেড পূর্বরূপটিতে ভালভাবে কাজ করছে না, আপনি এটি এখানে চেষ্টা করতে পারেন: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Async ক্লিপবোর্ড API

মনে রাখবেন যে "অনুমতির জন্য অনুরোধ করুন" এবং Chrome 66 এ অনুমতি API এর মাধ্যমে ক্লিপবোর্ডে অ্যাক্সেসের জন্য পরীক্ষা আছে।

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ( 'কপি করো')

এই পোস্টটি বাকি document.execCommand('copy') এবং document.execCommand('copy') কম্যান্ড document.execCommand('copy') API এর বিশদে যায়।

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

জাভাস্ক্রিপ্ট document.execCommand('copy') কম্যান্ড document.execCommand('copy') সমর্থন বৃদ্ধি পেয়েছে, ব্রাউজার আপডেটের জন্য নীচের লিঙ্কটি দেখুন:

সহজ উদাহরণ

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

জটিল উদাহরণ: ইনপুট প্রদর্শন ছাড়া ক্লিপবোর্ডে অনুলিপি করুন

স্ক্রিনে দৃশ্যমান textarea বা input উপাদান থাকলে উপরের সাধারণ উদাহরণটি দুর্দান্ত কাজ করে।

কিছু ক্ষেত্রে আপনি একটি input / textarea উপাদান প্রদর্শন না করে ক্লিপবোর্ডে পাঠ্য অনুলিপি করতে চাইতে পারেন। এটি এইরকম কাজ করার একটি উপায়ের একটি উদাহরণ (মূলত উপাদান সন্নিবেশ করান, ক্লিপবোর্ডে অনুলিপি করুন, উপাদানটি সরান):

গুগল ক্রোম 44, ফায়ারফক্স 42.0 এ 1 এবং IE 11.0.8600.17814 দিয়ে পরীক্ষা করা হয়েছে।

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a flash,
  // so some of these are just precautions. However in IE the element
  // is visible whilst the popup box asking the user for permission for
  // the web page to copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

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

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>

অতিরিক্ত নোট

ব্যবহারকারী একটি কর্ম নেয় শুধুমাত্র কাজ করে

সমস্ত document.execCommand('copy') কলগুলি অবশ্যই ব্যবহারকারীর ক্রিয়াগুলির সরাসরি ফলাফল হিসাবে সংঘটিত হওয়া উচিত, যেমন ইভেন্ট ইভেন্ট হ্যান্ডলার। এটি ব্যবহারকারীর ক্লিপবোর্ডের সাথে ঝগড়া প্রতিরোধ করার একটি পরিমাপ যা তারা এটি প্রত্যাশা করে না।

আরও তথ্যের জন্য এখানে Google বিকাশকারীদের দেখুন।

ক্লিপবোর্ড এপিআই

সম্পূর্ণ ক্লিপবোর্ড API খসড়া স্পেসিফিকেশনটি এখানে পাওয়া যাবে মনে রাখবেন: https://w3c.github.io/clipboard-apis/

এটা কি সমর্থিত?

  • document.queryCommandSupported('copy') সমর্থিত document.queryCommandSupported('copy') কমান্ড "ব্রাউজার দ্বারা সমর্থিত হয়" যদি true ফিরে করা উচিত।
  • এবং document.queryCommandEnabled('copy') যদি document.execCommand('copy') এখন কল করা হলে সফল হবে। কমান্ডটিকে ব্যবহারকারীর দ্বারা শুরু হওয়া থ্রেড থেকে এবং অন্য প্রয়োজনীয়তাগুলি পূরণ করার জন্য পরীক্ষা করা হয়েছে তা পরীক্ষা করা হচ্ছে।

তবে ব্রাউজারের সামঞ্জস্যের সমস্যাগুলির উদাহরণ হিসাবে, ~ এপ্রিল থেকে ~ অক্টোবর 2015 এর মধ্যে Google Chrome শুধুমাত্র ব্যবহারকারীর দ্বারা শুরু হওয়া থ্রেড থেকে ডাকা হলে document.queryCommandSupported('copy') থেকে true

নীচের সামঞ্জস্য বিবরণ নোট।

ব্রাউজার সামঞ্জস্যের বিস্তারিত

একটি ব্যবহারকারীর ক্লিকের ফলে বলা একটি try / catch ব্লকটিতে ডুবে document.execCommand('copy') একটি সহজ কল করার সময় নিম্নলিখিতগুলির কয়েকটি প্রমাণ রয়েছে যা আপনাকে সবচেয়ে সামঞ্জস্যপূর্ণ ব্যবহার করবে:

document.execCommand , document.queryCommandSupported .queryCommand সমর্থিত বা document.queryCommandEnabled কোন কল একটি try / catch ব্লক মধ্যে আবৃত করা উচিত।

বিভিন্ন ব্রাউজার বাস্তবায়ন এবং ব্রাউজার সংস্করণ false ফেরত পরিবর্তে বলা বিভিন্ন ব্যতিক্রম ব্যতিক্রম।

বিভিন্ন ব্রাউজার বাস্তবায়ন এখনও ফ্লক্সে রয়েছে এবং https://w3c.github.io/clipboard-apis/ এখনও খসড়াতে রয়েছে, তাই আপনার পরীক্ষা করতে মনে রাখবেন।


Answer #2

আপনি যদি সত্যিই একটি সহজ সমাধান চান (সংহত করতে 5 মিনিটেরও কম সময় লাগে) এবং বক্সটির থেকে ভাল দেখায় তবে ক্লিপপি কিছু জটিল সমাধানগুলির জন্য একটি চমৎকার বিকল্প।

Clippy

এটি গিথুবের সহ-প্রতিষ্ঠাতা দ্বারা লিখিত ছিল। উদাহরণ ফ্ল্যাশ নীচের এম্বেড কোড:

<object 
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed 
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

#{text} প্রতিস্থাপিত পাঠ্য এবং #{bgcolor} একটি রং সহ প্রতিস্থাপন করতে মনে রাখবেন।


Answer #3

আমি যে প্রকল্পগুলির উপর কাজ করছিলাম তার থেকে একটি জিরো কপি-টু-ক্লিপবোর্ড প্লাগিন যা জিরো ক্লিপবোর্ড লাইব্রেরি ব্যবহার করে।

যদি আপনি একটি ভারী jQuery ব্যবহারকারী হন তবে স্থানীয় জিরো ক্লিপবোর্ড প্লাগিনের চেয়ে এটি ব্যবহার করা সহজ।


Answer #4

একটি ওয়েবপেজ থেকে ক্লিপবোর্ড পড়া এবং সংশোধন করা নিরাপত্তা এবং গোপনীয়তা উদ্বেগ বাড়ায়। যাইহোক, ইন্টারনেট এক্সপ্লোরারে, এটি করা সম্ভব। আমি এই উদাহরণ স্নিপেট পাওয়া যায়:

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />


Answer #5

ক্লিপবোর্ডে স্বয়ংক্রিয় অনুলিপি বিপজ্জনক হতে পারে, তাই সর্বাধিক ব্রাউজার (IE ব্যতীত) এটি খুব কঠিন করে তোলে। ব্যক্তিগতভাবে, আমি নিম্নলিখিত সহজ কৌশল ব্যবহার করি:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

ব্যবহারকারী প্রম্পট বক্সের সাথে উপস্থাপিত হয়, যেখানে অনুলিপি করা পাঠ্যটি ইতিমধ্যে নির্বাচিত হয়। এখন Ctrl + C এবং Enter (বক্সটি বন্ধ করতে) চাপুন - এবং voila!

এখন ক্লিপবোর্ড কপি অপারেশনটি নিরাপদ, কারণ ব্যবহারকারী নিজে এটি করে (কিন্তু একটি সুন্দর সহজতর ভাবে)। অবশ্যই, সব ব্রাউজারে কাজ করে।

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>


Answer #6

জিরো ক্লিপবোর্ডটি আমি খুঁজে পেয়েছি সেরা ক্রস ব্রাউজার সমাধান:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

যদি আপনার iOS এর জন্য অ-ফ্ল্যাশ সমর্থন প্রয়োজন হয় তবে আপনি কেবল একটি পতন যুক্ত করুন:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard


Answer #7

সম্প্রতি আমি এই সমস্যাটির উপর একটি প্রযুক্তিগত ব্লগ পোস্ট লিখেছি (আমি লুসিডচার্টে কাজ করেছি এবং সম্প্রতি আমরা আমাদের ক্লিপবোর্ডে একটি ওভারহুল করেছি)।

ক্লিপবোর্ডে সাধারণ পাঠ্য অনুলিপি করা তুলনামূলকভাবে সহজ, অনুমান করে আপনি এটি একটি সিস্টেম কপি ইভেন্টের সময় করতে চান (ব্যবহারকারী Ctrl C টিপুন বা ব্রাউজারের মেনু ব্যবহার করে)।

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

একটি সিস্টেম অনুলিপি ইভেন্ট সময় ক্লিপবোর্ডে টেক্সট স্থাপন করা আরো কঠিন। ফ্ল্যাশের মাধ্যমে এটি করার জন্য এই অন্য কিছু উত্তর রেফারেন্স উপায়গুলির মত মনে হচ্ছে, যা এটি করার একমাত্র ক্রস-ব্রাউজার উপায় (যতদূর আমি বুঝি)।

অন্যথায়, ব্রাউজার-বাই-ব্রাউজারের ভিত্তিতে কিছু বিকল্প রয়েছে।

এটি IE তে সর্বাধিক সহজ, যেখানে আপনি ক্লিপবোর্ডডাটা অবজেক্টটি যে কোনও সময়ে জাভাস্ক্রিপ্ট থেকে অ্যাক্সেস করতে পারেন:

window.clipboardData

(যখন আপনি এটির কোনও সিস্টেম কেটে, অনুলিপি, বা পেস্ট ইভেন্টটি করার চেষ্টা করেন, তবে IE ব্যবহারকারীকে ওয়েব অ্যাপ্লিকেশন ক্লিপবোর্ড অনুমতি দেওয়ার জন্য অনুরোধ করবে।)

Chrome এ, আপনি একটি Chrome এক্সটেনশান তৈরি করতে পারেন যা আপনাকে ক্লিপবোর্ডের অনুমতি দেবে (এইটি আমরা লুসিডচার্টের জন্য করি)। তারপরে আপনার এক্সটেনশন ইনস্টল থাকা ব্যবহারকারীদের জন্য আপনাকে কেবল সিস্টেম ইভেন্টটিকে আগুনে পুড়িয়ে দেওয়ার প্রয়োজন হবে:

document.execCommand('copy');

মনে হচ্ছে ফায়ারফক্সের কিছু অপশন রয়েছে যা ব্যবহারকারীদের ক্লিপবোর্ড অ্যাক্সেস করার জন্য কিছু সাইটকে অনুমতি দেওয়ার অনুমতি দেয়, তবে আমি ব্যক্তিগতভাবে এটির কোনও চেষ্টা করে নি।


Answer #8

clipboard.js একটি ছোট, নন-ফ্ল্যাশ, ইউটিলিটি যা ক্লিপবোর্ডে পাঠ্য বা এইচটিএমএল ডেটা অনুলিপি করার অনুমতি দেয়। এটি ব্যবহার করা খুব সহজ, শুধু .js অন্তর্ভুক্ত করুন এবং এরকম কিছু ব্যবহার করুন:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js এছাড়াও GitHub


Answer #9

আমি clipboard.js ব্যবহার করেছেন

আমরা npm এটি পেতে পারেন

function appCopyToClipBoard( sText )
{
 var oText = false,
     bResult = false;
 try
 {
  oText = document.createElement("textarea");
  $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
  oText.select();
  document.execCommand("Copy");
  bResult = true;
 } catch(e) {}

 $(oText).remove();
 return bResult;
}

এবং ঘোড়া উপর

if( !appCopyToClipBoard( 'Hai there! This is copied to the clipboard.' ))
 { alert('Sorry, copy to clipboard failed.'); }

ব্যবহার এবং উদাহরণ https://zenorocha.github.io/clipboard.js/


Answer #10

আমি একসঙ্গে করেছি কি আমি মনে করি সেরা এক।

  • সরাসরি স্টাইল বিরোধ হিসাবে IE মধ্যে ব্যতিক্রম এড়াতে cssText ব্যবহার করে।
  • একটি ছিল যদি নির্বাচন পুনরুদ্ধার
  • পঠনযোগ্যভাবে সেট করে যাতে কীবোর্ডগুলি মোবাইল ডিভাইসগুলিতে আসে না
  • আইওএস এর জন্য একটি কার্যকারিতা আছে যাতে এটি সাধারণত এটি সাধারণভাবে execCommand ব্লক হিসাবে কাজ করে।

এটা এখানে:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // https://.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    } else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    } catch (err) {
      return false;
    }
  };
})();

Answer #11

এইচটিএমএল ইনপুট থেকে ক্লিপবোর্ডে টেক্সট অনুলিপি করুন

 
 function myFunction() {
  /* Get the text field */
   var copyText = document.getElementById("myInput");
 
   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");
 
   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }
 
 
 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">
 
 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
 

দ্রষ্টব্য: পদ্ধতি আগের IE9 সমর্থিত নয় এবং।document.execCommand()

উত্স : W3Schools - ক্লিপবোর্ডে পাঠ্য অনুলিপি করুন


Answer #12

এটি @ চেজের উত্তরের একটি সম্প্রসারণ, এটি IMAGE এবং টেবিল উপাদানগুলির জন্য কাজ করবে, যা IE9 এ কেবল ডিভি নয়।

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

Answer #13

যতদূর আমি জানি যে শুধুমাত্র ইন্টারনেট এক্সপ্লোরারে কাজ করে।

এছাড়াও ডাইনামিক সরঞ্জাম দেখুন - ক্লিপবোর্ডে জাভাস্ক্রিপ্ট অনুলিপি করুন , তবে ব্যবহারকারীকে প্রথমে কনফিগারেশন পরিবর্তন করতে হবে এবং এমনকি এটি কাজ বলে মনে হচ্ছে না।


Answer #14

  <!DOCTYPE html>

  <style>
    #t {
      width: 1px
      height: 1px
      border: none
    }
    #t:focus {
      outline: none
    }
  </style>

  <script>
    function copy(text) {
      var t = document.getElementById('t')
      t.innerHTML = text
      t.select()
      try {
        var successful = document.execCommand('copy')
        var msg = successful ? 'successfully' : 'unsuccessfully'
        console.log('text coppied ' + msg)
      } catch (err) {
        console.log('Unable to copy text')
      }
      t.innerHTML = ''
    }
  </script>

  <textarea id=t></textarea>

  <button onclick="copy('hello world')">
    Click me
  </button>


Answer #15

অন্যান্য পদ্ধতি ক্লিপবোর্ডে প্লেইন টেক্সট কপি করবে। এইচটিএমএল অনুলিপি করার জন্য (অর্থাত্, আপনি একটি WSIWYG এডিটরতে ফলাফল পেস্ট করতে পারেন), আপনি শুধুমাত্র IE এ নিম্নলিখিতটি করতে পারেন । এটি মূলত অন্যান্য পদ্ধতির থেকে আলাদা, যেমন ব্রাউজার আসলে দৃশ্যত বিষয়বস্তু নির্বাচন করে।

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

Answer #16

আপনার ক্লিপবোর্ডে একটি নির্বাচিত পাঠ্য ('পাঠ্য অনুলিপি') অনুলিপি করতে, একটি বুকমার্কলেট তৈরি করুন (ব্রাউজার বুকমার্ক যা Javsacript চালায়) এবং এটি কার্যকর করুন (এটিতে ক্লিক করুন)। এটি একটি অস্থায়ী textarea তৈরি করবে।

জিথুব থেকে কোড:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

Answer #17

আমি এই খুব সফলভাবে ব্যবহার ( jquery বা অন্য কোন ফ্রেমওয়ার্ক ছাড়া )।

function copyToClp(txt){
    txt = document.createTextNode(txt);
    document.body.appendChild(txt);
    if (document.body.createTextRange) {
        var d = document.body.createTextRange();
        d.moveToElementText(txt);
        d.select();
        document.execCommand('copy');
    } else {
        var d = document.createRange();
        d.selectNodeContents(txt);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(d);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
    }
    txt.remove();
} 

সতর্কতা

ট্যাব স্পেসে রূপান্তরিত হয় (অন্তত ক্রোমে)।


Answer #18

আমি পৃষ্ঠা থেকে নন-ইনপুট বক্স পাঠ্য (যে কোনও ডিভ / স্প্যান ট্যাগের মধ্যে পাঠ্য) অনুলিপি করতে এবং নিম্নলিখিত কোডটি দিয়ে এসেছি। শুধুমাত্র কৌতুক একটি লুকানো ক্ষেত্র আছে কিন্তু টাইপ টাইপ হিসাবে, লুকানো টাইপ সঙ্গে কাজ করবেন না।

    function copyToClipboard(sID) {
        var aField = document.getElementById("hiddenField");

        aField.hidden   = false;
        aField.value    = document.getElementById(sID).textContent;
        aField.select();
        document.execCommand("copy");
        alert("Following text has been copied to the clipboard.\n\n" + aField.value);
        aField.hidden = true;
    }

এবং এইচটিএমএল নিম্নলিখিত যোগ করুন

ইনপুট টাইপ = "টেক্সট" id = "লুকানো ফিল্ড" শৈলী = "প্রস্থ: 5px; সীমানা: 0" /> ...


Answer #19

ফ্ল্যাশ 10 এর মতো, যদি আপনি ফ্ল্যাশ অবজেক্টের সাথে ব্যবহারকারীর মিথস্ক্রিয়া থেকে উদ্ভূত হন তবে আপনি কেবল ক্লিপবোর্ডে অনুলিপি করতে পারেন। ( অ্যাডোব এর ফ্ল্যাশ 10 ঘোষণা থেকে সম্পর্কিত বিভাগ পড়ুন )

সমাধান অনুলিপি একটি ফ্ল্যাশ বস্তু অনুলিপি বাটন উপরে, অথবা যে কোন উপাদানটি অনুলিপি আরম্ভ করা হয়। জিরো ক্লিপবোর্ড বর্তমানে এই বাস্তবায়নের সাথে সেরা লাইব্রেরি। অভিজ্ঞ ফ্ল্যাশ ডেভেলপাররা তাদের নিজস্ব লাইব্রেরি তৈরি করতে পারে।


Answer #20

মনে হচ্ছে আমি প্রশ্নটি ভুল করেছি, তবে রেফারেন্সের জন্য আপনি ডমের একটি পরিসর বের করতে পারবেন (ক্লিপবোর্ডে নয়; সকল আধুনিক ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ) এবং ক্লিপবোর্ড আচরণ পেতে অনকপি এবং অনপাস্ট এবং অনবারপেষ্ট ইভেন্টগুলির সাথে এটি সংযুক্ত করুন। এখানে এই অর্জনের কোডটি রয়েছে:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>





copy-paste