সমাধান # 1 (কেবলমাত্র সরল পাঠ্য এবং ফায়ারফক্স 22+ প্রয়োজন)
আইআই 6 +, এফএফ 22+, ক্রোম, সাফারি, এজ জন্য কাজ করে (কেবল আইই 9 + তে পরীক্ষা করা হয়েছে, তবে কম সংস্করণে কাজ করা উচিত)
এইচটিএমএল বা ফায়ারফক্স <= 22 পেস্ট করার জন্য আপনার যদি সমর্থন প্রয়োজন হয় তবে সমাধান # 2 দেখুন।
এইচটিএমএল
<div id='editableDiv' contenteditable='true'>Paste</div>
জাভাস্ক্রিপ্ট
function handlePaste (e) {
var clipboardData, pastedData;
// Stop data actually being pasted into div
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
// Do whatever with pasteddata
alert(pastedData);
}
document.getElementById('editableDiv').addEventListener('paste', handlePaste);
জেএসফিডাল: https://jsfiddle.net/swL8ftLs/12/
নোট করুন যে এই সমাধানটি getDataফাংশনের জন্য 'পাঠ্য' পরামিতিটি ব্যবহার করে , যা অ-মানক। তবে এটি লেখার সময় সমস্ত ব্রাউজারে কাজ করে।
সমাধান # 2 (এইচটিএমএল এবং ফায়ারফক্সের জন্য কাজ <<22)
আইআই 6 +, এফএফ 3.5+, ক্রোম, সাফারি, এজতে পরীক্ষিত
এইচটিএমএল
<div id='div' contenteditable='true'>Paste</div>
জাভাস্ক্রিপ্ট
var editableDiv = document.getElementById('editableDiv');
function handlepaste (e) {
var types, pastedData, savedContent;
// Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
// Check for 'text/html' in types list. See abligh's answer below for deatils on
// why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
// Safari/Edge don't advertise HTML data even if it is available
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
// Extract data and pass it to callback
pastedData = e.clipboardData.getData('text/html');
processPaste(editableDiv, pastedData);
// Stop the data from actually being pasted
e.stopPropagation();
e.preventDefault();
return false;
}
}
// Everything else: Move existing element contents to a DocumentFragment for safekeeping
savedContent = document.createDocumentFragment();
while(editableDiv.childNodes.length > 0) {
savedContent.appendChild(editableDiv.childNodes[0]);
}
// Then wait for browser to paste content into it and cleanup
waitForPastedData(editableDiv, savedContent);
return true;
}
function waitForPastedData (elem, savedContent) {
// If data has been processes by browser, process it
if (elem.childNodes && elem.childNodes.length > 0) {
// Retrieve pasted content via innerHTML
// (Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
var pastedData = elem.innerHTML;
// Restore saved content
elem.innerHTML = "";
elem.appendChild(savedContent);
// Call callback
processPaste(elem, pastedData);
}
// Else wait 20ms and try again
else {
setTimeout(function () {
waitForPastedData(elem, savedContent)
}, 20);
}
}
function processPaste (elem, pastedData) {
// Do whatever with gathered data;
alert(pastedData);
elem.focus();
}
// Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
editableDiv.addEventListener('paste', handlepaste, false);
}
// IE <= 8
else {
editableDiv.attachEvent('onpaste', handlepaste);
}
জেএসফিডাল: https://jsfiddle.net/nicoburns/wrqmuabo/23/
ব্যাখ্যা
onpasteঘটনা divহয়েছে handlePaste: ফাংশন থেকে সংযুক্ত ও একটি একক যুক্তি পাস eventপেস্ট ইভেন্টের জন্য বস্তু। আমাদের কাছে বিশেষ আগ্রহের বিষয় হ'ল clipboardDataএই ইভেন্টটির সম্পত্তি যা অ-ie ব্রাউজারগুলিতে ক্লিপবোর্ড অ্যাক্সেস সক্ষম করে। আইই তে সমতুল্য window.clipboardData, যদিও এর কিছুটা আলাদা আলাদা এপিআই রয়েছে।
নীচে সম্পদ বিভাগ দেখুন।
handlepasteফাংশন:
এই ফাংশন দুটি শাখা আছে।
অস্তিত্বের অস্তিত্বের জন্য প্রথম চেক করে event.clipboardDataএবং এটির typesসম্পত্তিটিতে 'টেক্সট / এইচটিএমএল' রয়েছে কিনা তা যাচাই করে ( পদ্ধতিটি ব্যবহার করে যাচাই করা হয় , অথবা পদ্ধতিটি ব্যবহার করে পরীক্ষা করা একটি স্ট্রিং typesহতে পারে )। যদি এই সমস্ত শর্ত পূরণ হয়, তবে আমরা 'টেক্সট / প্লেইন' এর পরিবর্তে 'টেক্সট / এইচটিএমএল' বাদ দিয়ে সমাধান # 1 হিসাবে এগিয়ে যাই। এটি বর্তমানে ক্রোম এবং ফায়ারফক্স 22+ এ কাজ করে।DOMStringListcontainsindexOf
যদি এই পদ্ধতিটি সমর্থিত না হয় (অন্য সমস্ত ব্রাউজার), তবে আমরা
- উপাদান উপাদানগুলি একটিতে সংরক্ষণ করুন
DocumentFragment
- উপাদানটি খালি করুন
waitForPastedDataফাংশন কল করুন
waitforpastedataফাংশন:
এই ফাংশনটি প্রথম পেস্ট করা তথ্যের জন্য পোলস (20 মেন একবারে), যা প্রয়োজনীয় কারণ এটি সরাসরি প্রদর্শিত হয় না। যখন ডেটা এটি প্রদর্শিত হবে:
- পরিবর্তনশীলগুলিতে সম্পাদনাযোগ্য ডিভের অভ্যন্তরীণ এইচটিএমএল (যা এখন আটকানো ডেটা) সংরক্ষণ করে
- ডকুমেন্টফ্রেগমেন্টে সংরক্ষিত সামগ্রী পুনরুদ্ধার করে
- পুনরুদ্ধার করা ডেটা সহ 'প্রসেসপাস্ট' ফাংশন কল করে
processpasteফাংশন:
আটকানো ডেটা দিয়ে নির্বিচারে জিনিসগুলি করে। এক্ষেত্রে আমরা কেবল তথ্য সতর্ক করি, আপনি যা খুশি তা করতে পারেন। আপনি সম্ভবত কোনও ধরণের ডেটা স্যানিটাইজিং প্রক্রিয়াটির মাধ্যমে আটকানো ডেটা চালাতে চান।
কার্সার অবস্থান সংরক্ষণ এবং পুনরুদ্ধার
সত্যিকারের পরিস্থিতিতে আপনি সম্ভবত নির্বাচনটি আগে সংরক্ষণ করতে এবং তারপরে পুনরুদ্ধার করতে চান ( বিষয়বস্তুতে কার্সারের অবস্থান নির্ধারণযোগ্য <ডিভি>> )। ব্যবহারকারী যখন পেস্ট ক্রিয়াটি শুরু করেছিলেন তখন আপনি কার্সারটি যে অবস্থানে রেখেছিলেন সে ক্ষেত্রে আপনি আটকানো ডেটা sertোকাতে পারেন।
সম্পদ:
একটি ডকুমেন্টফ্রেগমেন্ট ব্যবহারের পরামর্শ দেওয়ার জন্য টিম ডাউনকে ধন্যবাদ জানাই, এবং ক্লিপবোর্ডডেটা.প্রকারের স্ট্রিংয়ের পরিবর্তে ডিওএমএস স্ট্রিংলিস্ট ব্যবহারের কারণে ফায়ারফক্সে ত্রুটি ধরার জন্য প্রশস্ত