103

कुछ वेबसाइट अब Tynt से एक जावास्क्रिप्ट सेवा का उपयोग करती हैं जो कॉपी की गई सामग्री के लिए पाठ को जोड़ती है।

यदि आप इसका उपयोग करके किसी साइट से टेक्स्ट कॉपी करते हैं और फिर पेस्ट करते हैं तो आपको टेक्स्ट के निचले भाग में मूल सामग्री का लिंक मिलता है।

जैसा कि होता है, टाइनट भी इसे ट्रैक करता है। यह एक अच्छी चाल है।

ऐसा करने के लिए उनकी स्क्रिप्ट प्रभावशाली है - बजाय क्लिपबोर्ड में हेरफेर करने की कोशिश करने के (जो कि IE के पुराने संस्करणों ने उन्हें डिफ़ॉल्ट रूप से करने की अनुमति दी है और जिसे हमेशा बंद कर दिया जाना चाहिए) वे वास्तविक चयन में हेरफेर करते हैं।

इसलिए जब आप पाठ का एक ब्लॉक चुनते हैं तो <div>आपके चयन में शामिल एक छिपी सामग्री के रूप में अतिरिक्त सामग्री जोड़ी जाती है । जब आप पेस्ट करते हैं तो अतिरिक्त शैली को अनदेखा कर दिया जाता है और अतिरिक्त लिंक दिखाई देता है।

यह वास्तव में पाठ के सरल ब्लॉकों के साथ करना काफी आसान है, लेकिन एक बुरा सपना जब आप विभिन्न ब्राउज़रों में जटिल एचटीएमएल भर में सभी चयनों पर विचार करते हैं।

मैं एक वेब एप्लिकेशन विकसित कर रहा हूं - मैं नहीं चाहता कि कोई भी नकल की गई सामग्री को ट्रैक करने में सक्षम हो और मैं अतिरिक्त जानकारी को केवल एक लिंक के बजाय कुछ प्रासंगिक रखना चाहूंगा। इस मामले में टिंट की सेवा वास्तव में उचित नहीं है।

क्या किसी को एक ओपन सोर्स जावास्क्रिप्ट लाइब्रेरी (शायद एक jQuery प्लग या इसी तरह की) के बारे में पता है जो समान कार्यक्षमता प्रदान करता है लेकिन यह आंतरिक एप्लिकेशन डेटा को उजागर नहीं करता है?

javascript clipboard

— कीथ
स्रोत

1

पर मेरा उत्तर पर एक नज़र डालें stackoverflow.com/questions/6344588/... । जैसा कि आपने प्रस्तावित किया है यह बहुत समान है

— निकलैस

1

यह भी देखें stackoverflow.com/questions/1203082/...

— Gnubie

48

कृपया ऐसा न करें। कृपया बस कृपया मत करो।

— कूपचंद

5

@ कोउचंद को क्यों नहीं? मुझे लगता है कि स्पैम साइटों पर यह कितना कष्टप्रद है, लेकिन यह एक ऐसे अनुप्रयोग के लिए है जिसका उपयोग उद्धरणों के लिए किया जा सकता है और जहां आंतरिक डेटा संवेदनशील है। इसलिए मैं Tynt का उपयोग नहीं करना चाहता था।

— कीथ

4

क्या आप वास्तव में इसे करना चाहते हैं? एक उपयोगकर्ता के रूप में, मुझे इससे नफरत है और मैं इस गुस्से को आपके उत्पाद में चित्रित करूंगा

— aloisdg codidact.com

138

2020 अद्यतन

समाधान जो हाल के सभी ब्राउज़रों पर काम करता है।

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text', document.getSelection() + pagelink);
  event.preventDefault();
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

स्निपेट का विस्तार करें

[पुरानी पोस्ट - 2020 अपडेट से पहले]

कॉपी किए गए वेब टेक्स्ट में अतिरिक्त जानकारी जोड़ने के दो मुख्य तरीके हैं।

1. चयन में हेरफेर

इसके लिए देखने के लिए विचार है copy event, फिर हमारे अतिरिक्त जानकारी के साथ एक छिपे हुए कंटेनर को संलग्न करें dom, और इसके लिए चयन का विस्तार करें।
यह विधि इस लेख से c.bavota द्वारा अनुकूलित है । अधिक जटिल मामले के लिए jitbit का संस्करण भी देखें ।

ब्राउज़र संगतता : सभी प्रमुख ब्राउज़र, IE> 8।
डेमो : jsFiddle डेमो ।
जावास्क्रिप्ट कोड :


    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {
            document.body.removeChild(newdiv);
        }, 100);
    }

    document.addEventListener('copy', addLink);

2. क्लिपबोर्ड में हेरफेर

विचार copy eventक्लिपबोर्ड डेटा को देखने और सीधे संशोधित करने का है। clipboardDataसंपत्ति का उपयोग करना संभव है । ध्यान दें कि यह संपत्ति सभी प्रमुख ब्राउज़रों में उपलब्ध है read-only; setDataविधि IE पर ही उपलब्ध है।

ब्राउज़र संगतता : IE> 4।
डेमो : jsFiddle डेमो ।
जावास्क्रिप्ट कोड :


    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);

— CronosS
स्रोत

1

चीयर्स! दुर्भाग्य से हमें IE में काम करने की आवश्यकता है, लेकिन यह एक बुरी शुरुआत नहीं है।

— कीथ

2

"<प्री>" टैग के लिए वर्कअराउंड होना चाहिए, इस स्क्रिप्ट का एक स्मूथ वर्जन यहां है

— एलेक्स

15

ध्यान दें कि अगर आप बदलते हैं तो "क्लिपबोर्ड को मैनिपुलेट करना" फायरफॉक्स, क्रोम और सफारी में पहले से काम करता window.clipboardDataहै event.clipboardData। IE (v11 भी) event.clipboardData jsfiddle.net/m56af0je/8 का

— मेम्स

3

यदि आप Google Analytics आदि का उपयोग कर रहे हैं, तो आप लॉग इन करने के लिए एक घटना को भी आग लगा सकते हैं जो उपयोगकर्ता आपकी साइट से कॉपी कर रहे हैं। दिलचस्प

— गिडुब

2

पहला विकल्प कॉपी किए गए पाठ की नई पंक्ति वर्णों को अनदेखा करता है।

— सोहम

7

यह ऊपर संशोधित समाधान से एक वेनिला जावास्क्रिप्ट समाधान है, लेकिन अधिक ब्राउज़र (क्रॉस ब्राउज़र विधि) का समर्थन करता है

function addLink(e) {
    e.preventDefault();
    var pagelink = '\nRead more: ' + document.location.href,
    copytext =  window.getSelection() + pagelink;
    clipdata = e.clipboardData || window.clipboardData;
    if (clipdata) {
        clipdata.setData('Text', copytext);
    }
}
document.addEventListener('copy', addLink);

— GiorgosK
स्रोत

3

JQuery के लिए सबसे छोटा संस्करण जिसे मैंने परीक्षण किया और काम कर रहा है:

jQuery(document).on('copy', function(e)
{
  var sel = window.getSelection();
  var copyFooter = 
        "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
  var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
  $('body').append(copyHolder);
  sel.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});

— user2276146
स्रोत

वह कोड कहां है जो वास्तव में क्लिपबोर्ड पर परिणाम की प्रतिलिपि बनाता है?

— vsync

@vsync मेरा मानना है कि नकल होने से ठीक पहले यह कार्यशीलता जोड़ता है (जो कि उपयोगकर्ता द्वारा शुरू किए जाने पर सिस्टम द्वारा किया जाता है)।

— टेरानरिच

@vsync - जैसा कि टेरारिच ने कहा, मैंने इस सवाल का जवाब देने की कोशिश की, जो कॉपी किए गए पाठ में अतिरिक्त जानकारी जोड़ने के बारे में था, इसलिए समाधान केवल इस हिस्से को कवर करता है।

— user2276146

3

यहाँ jquery में एक प्लगइन है कि https://github.com/niklasvh/jquery.plugin.clipboard प्रोजेक्ट रीडमे से "यह स्क्रिप्ट एक कॉपी ईवेंट से पहले एक चयन की सामग्री को संशोधित करता है, जिसके परिणामस्वरूप कॉपी चयन होता है।" उपयोगकर्ता द्वारा चयनित से भिन्न होना।

यह आपको सामग्री को चयन के लिए / प्रीपेन्ड करने की अनुमति देता है, जैसे कि कॉपीराइट जानकारी या अन्य सामग्री।

एमआईटी लाइसेंस के तहत जारी "

— sktguha
स्रोत

1

जो बहुत ही आशाजनक लग रहा है। यह इनलाइन शैलियों का उपयोग करता है जिन्हें हम अपने सीएसपी के साथ अनुमति नहीं देते हैं, लेकिन इसे संभवतः अनुकूलित किया जा सकता है। चीयर्स!

— कीथ

3

उत्तर पर सुधार, प्रतिलिपि के बाद यादृच्छिक चयन को रोकने के लिए परिवर्तनों के बाद चयन को पुनर्स्थापित करें।

function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
    var range = selection.getRangeAt(0); // edited according to @Vokiel's comment

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range);
    }, 100);
}

document.addEventListener('copy', addLink);

— digitalPBK
स्रोत

@TsukimotoMitsumasa var range = selection.getRangeAt(0);

— वोकिएल

पाठ का चयन बहाल करना एक अच्छा विचार है, अन्यथा, यह डिफ़ॉल्ट ब्राउज़र व्यवहार को तोड़ देता है।

— सर्गेई

2

2018 के लिए सुधार

document.addEventListener('copy', function (e) {
    var selection = window.getSelection();
    e.clipboardData.setData('text/plain', $('<div/>').html(selection + "").text() + "\n\n" + 'Source: ' + document.location.href);
    e.clipboardData.setData('text/html', selection + '<br /><br />Source: <a href="' + document.location.href + '">' + document.title + '</a>');
    e.preventDefault();
});

— इलेक्ट्रॉनिक
स्रोत

1

जब आप कॉपी-पेस्ट करते हैं तो आप स्वरूपण खो देते हैं ( <a> , <img> , <b> और अन्य टैग)। चयनित पाठ का HTML कोड प्राप्त करना बेहतर है। इस उत्तर से getSelectionHtml () फ़ंक्शन का उपयोग करें : [ stackoverflow.com/a/4177234/4177020] और अब आप इस स्ट्रिंग var selection = window.getSelection();को इस एक से बदल सकते हैं :var selection = getSelectionHtml();

— दिमित्री कुलहिन

0

इसके अलावा एक छोटा सा समाधान:

jQuery( document ).ready( function( $ )
    {
    function addLink()
    {
    var sel = window.getSelection();
    var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
    var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
    $( 'body' ).append( div );
    sel.selectAllChildren( div[0] );
    div.remove();
    }



document.oncopy = addLink;
} );

— almo
स्रोत

0

यह ऊपर 2 जवाबों का संकलन है + माइक्रोसॉफ्ट एज के साथ संगतता।

मैंने मूल चयन के अंत में एक पुनर्स्थापना भी जोड़ी है, क्योंकि यह किसी भी ब्राउज़र में डिफ़ॉल्ट रूप से अपेक्षित है।

function addCopyrightInfo() {
    //Get the selected text and append the extra info
    var selection, selectedNode, html;
    if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount) {
            selectedNode = selection.getRangeAt(0).startContainer.parentNode;
            var container = document.createElement("div");
            container.appendChild(selection.getRangeAt(0).cloneContents());
            html = container.innerHTML;
        }
    }
    else {
        console.debug("The text [selection] not found.")
        return;
    }

    // Save current selection to resore it back later.
    var range = selection.getRangeAt(0);

    if (!html)
        html = '' + selection;

    html += "<br/><br/><small><span>Source: </span><a target='_blank' title='" + document.title + "' href='" + document.location.href + "'>" + document.title + "</a></small><br/>";
    var newdiv = document.createElement('div');

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    // Insert the container, fill it with the extended text, and define the new selection.
    selectedNode.appendChild(newdiv); // *For the Microsoft Edge browser so that the page wouldn't scroll to the bottom.

    newdiv.innerHTML = html;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        selectedNode.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range); // Restore original selection.
    }, 5); // Timeout is reduced to 10 msc for Microsoft Edge's sake so that it does not blink very noticeably.  
}

document.addEventListener('copy', addCopyrightInfo);

— सेर्गेई
स्रोत

कॉपी किए गए वेब टेक्स्ट में अतिरिक्त जानकारी कैसे जोड़ें

2020 अद्यतन

[पुरानी पोस्ट - 2020 अपडेट से पहले]

1. चयन में हेरफेर

2. क्लिपबोर्ड में हेरफेर