انسخ / ضع النص في الحافظة باستخدام FireFox وSafari وChrome

StackOverflow https://stackoverflow.com/questions/127040

  •  02-07-2019
  •  | 
  •  

سؤال

في Internet Explorer يمكنني استخدام كائن clipboardData للوصول إلى الحافظة.كيف يمكنني القيام بذلك في FireFox و/أو Safari و/أو Chrome؟

هل كانت مفيدة؟

المحلول

توجد الآن طريقة للقيام بذلك بسهولة في معظم المتصفحات الحديثة باستخدام 

document.execCommand('copy');

سيؤدي هذا إلى نسخ النص المحدد حاليًا.يمكنك تحديد منطقة النص أو حقل الإدخال باستخدام

document.getElementById('myText').select();

لنسخ النص بشكل غير مرئي، يمكنك إنشاء منطقة نص بسرعة، وتعديل النص الموجود في المربع، وتحديده، ونسخه، ثم حذف منطقة النص.في معظم الحالات، لن تومض منطقة النص هذه على الشاشة.

لأسباب أمنية، لن تسمح لك المتصفحات بالنسخ إلا إذا اتخذ المستخدم نوعًا من الإجراء (على سبيل المثال.النقر على زر).إحدى الطرق للقيام بذلك هي إضافة حدث onClick إلى زر html الذي يستدعي طريقة تنسخ النص.

مثال كامل سيبدو 

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>

نصائح أخرى

لأسباب أمنية، لا يسمح لك Firefox بوضع نص في الحافظة.ومع ذلك، هناك حل بديل متاح باستخدام Flash.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

العيب الوحيد هو أن هذا يتطلب تمكين Flash.

المصدر ميت حاليا: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (وهكذا هو جوجل ذاكرة التخزين المؤقت)

تقوم جداول البيانات عبر الإنترنت بربط أحداث Ctrl+C وCtrl+V ونقل التركيز إلى عنصر تحكم TextArea المخفي وإما تعيين محتوياتها على محتويات الحافظة الجديدة المطلوبة للنسخ أو قراءة محتوياتها بعد انتهاء الحدث للصقها.

أنظر أيضا هل من الممكن قراءة الحافظة في Firefox وSafari وChrome باستخدام Javascript؟

إنه صيف 2015، ومع الكثير من الاضطرابات المحيطة ببرنامج Flash، فكرت في إضافة إجابة جديدة لهذا السؤال لتجنب استخدامه تمامًا.

clipboard.js هي أداة مساعدة لطيفة تسمح بنسخ البيانات النصية أو بيانات HTML إلى الحافظة.إنه سهل الاستخدام للغاية، ما عليك سوى تضمين ملف .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 قيد التشغيل أيضًا جيثب

في عام 2017، يمكنك القيام بذلك (قول هذا لأن عمر هذا الموضوع يبلغ 9 سنوات تقريبًا!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

والآن للنسخ copyStringToClipboard('Hello World')

إذا لاحظت setData سطر، وتساءلت عما إذا كان بإمكانك تعيين أنواع مختلفة من البيانات، فالإجابة هي نعم.

يسمح لك Firefox بتخزين البيانات في الحافظة، ولكن نظرًا للآثار الأمنية، يتم تعطيله افتراضيًا.تعرف على كيفية تمكينه "منح JavaScript الوصول إلى الحافظة" في قاعدة معارف Mozilla Firefox.

الحل الذي تقدمه amdfan هو الأفضل إذا كان لديك الكثير من المستخدمين وتكوين المتصفح الخاص بهم ليس خيارًا.على الرغم من أنه يمكنك اختبار ما إذا كانت الحافظة متاحة وتوفير رابط لتغيير الإعدادات، إذا كان المستخدمون على دراية بالتكنولوجيا.محرر جافا سكريبت TinyMCE يتبع هذا النهج.

تعمل وظيفة CopyIntoClipboard() مع Flash 9، ولكن يبدو أنها معطلة بسبب إصدار Flash player 10.إليك الحل الذي يعمل مع مشغل الفلاش الجديد:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

إنه حل معقد، لكنه فعال.

يجب أن أقول أن أيا من هذه الحلول حقًا عمل.لقد قمت بتجربة حل الحافظة من الإجابة المقبولة، وهي لا تعمل مع Flash Player 10.لقد قمت أيضًا بتجربة ZeroClipboard، وكنت سعيدًا جدًا به لفترة من الوقت.

أنا أستخدمه حاليًا على موقعي الخاص (http://www.blogtrog.com)، ولكنني لاحظت وجود أخطاء غريبة به.الطريقة التي يعمل بها ZeroClipboard هي أنه يضع كائن فلاش غير مرئي أعلى عنصر في صفحتك.لقد وجدت أنه إذا تحرك العنصر الخاص بي (مثل عندما يقوم المستخدم بتغيير حجم النافذة ومحاذاة الأشياء بشكل صحيح)، فإن كائن فلاش ZeroClipboard يخرج عن السيطرة ولم يعد يغطي الكائن.أظن أنه ربما لا يزال موجودًا حيث كان في الأصل.لديهم كود من المفترض أن يوقف ذلك، أو يعيد لصقه بالعنصر، لكن يبدو أنه لا يعمل بشكل جيد.

لذا...في الإصدار التالي من BlogTrog، أعتقد أنني سأتبع نفس الإجراء مع جميع أدوات تمييز التعليمات البرمجية الأخرى التي رأيتها في البرية وأزيل زر النسخ إلى الحافظة الخاص بي.:-(

(لاحظت أن نسخة dp.syntaxhiglighter إلى الحافظة معطلة الآن أيضًا.)

سؤال قديم جدًا ولكني لم أر هذه الإجابة في أي مكان ...

تحقق من هذا الرابط:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

كما قال الجميع، لأسباب أمنية يتم تعطيله بشكل افتراضي.يعرض الرابط أعلاه تعليمات حول كيفية تمكينه (عن طريق تحرير about:config في Firefox أو user.js).

لحسن الحظ، يوجد مكون إضافي يسمى "AllowClipboardHelper" يجعل الأمور أسهل ببضع نقرات فقط.ومع ذلك، لا تزال بحاجة إلى إرشاد زوار موقع الويب الخاص بك حول كيفية تمكين الوصول في فايرفوكس.

لقد استخدمت جيثب كليبي لاحتياجاتي، زر بسيط يعتمد على الفلاش.يعمل بشكل جيد، إذا لم يكن الشخص بحاجة إلى التصميم وكان سعيدًا بالإدراج ما للصق على جانب الخادم مسبقًا.

استخدم المستند الحديث. انظر هذه الإجابة على stackoverflow

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

كيف تتصل:

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());


// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

هناك تحسن طفيف في حل Flash وهو اكتشاف الفلاش 10 باستخدام swfobject:

http://code.google.com/p/swfobject/

ثم إذا ظهر كفلاش 10، فحاول تحميل كائن Shockwave باستخدام جافا سكريبت.يمكن لـ Shockwave القراءة/الكتابة إلى الحافظة (في جميع الإصدارات) وكذلك باستخدام الأمر CopyToClipboard() في اللغة.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp يعمل مع Flash 10 وجميع المتصفحات التي تدعم Flash.

تم أيضًا تحديث ZeroClipboard لتجنب الخطأ المذكور حول تمرير الصفحة والذي يتسبب في عدم وجود فيلم Flash في المكان الصحيح.

نظرًا لأن هذه الطريقة "تتطلب" من المستخدم النقر فوق زر للنسخ، فهذا يعد أمرًا مريحًا للمستخدم ولا يحدث أي شيء ضار.

إذا كنت تدعم الفلاش يمكنك استخدامه https://everyplay.com/assets/clipboard.swf واستخدم نص flashvars لتعيين النص

https://everyplay.com/assets/clipboard.swf?text=It%20Works

هذا هو الخيار الذي أستخدمه للنسخ ويمكنك تعيينه كإضافة إذا لم يكن يدعم هذه الخيارات التي يمكنك استخدامها:

بالنسبة للإنترنت إكسبلورر: window.clipboardData.setData(DataFormat, Text) وwindow.clipboardData.getData(DataFormat)

يمكنك استخدام النص وعنوان URL الخاصين بـ DataFormat للحصول على البيانات وsetData.

و لحذف البيانات:

يمكنك استخدام ملف DataFormat وHTML والصورة والنص وعنوان URL.ملاحظة:تحتاج إلى استخدام window.clipboardData.clearData(DataFormat);

وبالنسبة للملفات الأخرى التي لا تدعم window.clipboardData وملفات فلاش swf، يمكنك أيضًا استخدام زر control + c على لوحة المفاتيح لنظام التشغيل Windows ونظام التشغيل Mac، فهو Command + c

من كود الإضافة:

إذا كان أي شخص آخر يبحث عن كيفية القيام بذلك من خلال كود Chrome، فيمكنك استخدام واجهة nsIClipboardHelper كما هو موضح هنا: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

يستخدم document.execCommand('copy').مدعوم في أحدث الإصدارات من Chrome, Firefox, Edge, ، و Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

حاول إنشاء متغير عام للذاكرة لتخزين التحديد، ثم يمكن للوظيفة الأخرى الوصول إلى المتغير والقيام باللصق على سبيل المثال..

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

واجهة برمجة تطبيقات الحافظة تم تصميمه ليحل محل document.execCommand.لا يزال Safari يعمل على الدعم، لذا يجب عليك توفير بديل حتى تستقر المواصفات وينتهي Safari من التنفيذ.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};
<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

لأسباب أمنية الحافظة Permissions قد يكون من الضروري القراءة والكتابة من الحافظة.إذا لم يعمل المقتطف على SO، فقم بتجربته localhost أو مجال موثوق به.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top