Скопировать в буфер без Flash

Я нашел много решений для копирования в буфер обмена, но все они либо со вспышкой, либо с сайтами. Я ищу копию метода в буфер обмена автоматически, без флеш-памяти и для пользователя, это для пользовательских скриптов и, конечно, кросс-браузер.

Ответы

Ответ 1

Без вспышки это просто невозможно в большинстве браузеров. Буфер обмена пользователей - это ресурс, относящийся к безопасности, поскольку он может содержать такие вещи, как пароли или номера кредитных карт. Таким образом, браузеры по праву не разрешают доступ к Javascript (некоторые из них позволяют с предупреждением, показывающим, что пользователь подтвердил или с подписанным кодом Javascript, но ни один из них не является кросс-браузером).

Ответ 2

Я попробовал флеш-решение, и мне тоже не понравилось. Слишком сложно и слишком медленно. Я сделал это, чтобы создать текстовое поле, поместить в него данные и использовать поведение браузера "CTRL + C".

Часть javascript jQuery:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

Часть HTML:
  <textarea id="textArea1"></textarea>

Теперь поставьте то, что вы хотите скопировать в разделе "НАЖМИТЕ ТЕКСТ ДЛЯ КОПИРОВАНИЯ ЗДЕСЬ". МОЖЕТ БЫТЬ ФУНКЦИЕЙ. площадь. Прекрасно работает для меня. Вам просто нужно сделать комбинацию CTRL + C. Единственным недостатком является то, что у вас появится уродливая текстовая область, отображаемая на вашем сайте. Если вы используете стиль = "display: none", решение для копирования не будет работать.

Ответ 4

Наконец-то здесь! (Пока вы не поддерживаете Safari или IE8... -_-)

Теперь вы можете фактически обрабатывать действия в буфере обмена без Flash. Здесь соответствующая документация:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

Ответ 5

Пока ждет с нетерпением для поддержки Xbrowser API буфера обмена... < ш >


Это будет прекрасно работать в Chrome, Firefox, Edge, IE

IE предложит пользователю только один раз получить доступ к буферу. Safari (5.1 на момент написания) не поддерживает execCommand для copy/cut

function clip( e ) {
  e.preventDefault();
  var cont = $(this).html(), // Or use a custom source Element
      $txa = $("<textarea />",{val:cont,css:{position:"fixed"}}).appendTo("body").select(),
      $msg = $("#clip-popup");
  if(document.execCommand('copy')) $msg.show().delay(1500).fadeOut(); // CH, FF, Edge, IE
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  $txa.remove();
}

$(".clip").on("click", clip);
a{cursor: pointer; color: #F00BA4;}
textarea{width:70%; height:100px;}

/* CLIP - MESSAGE POPUP */
#clip-popup{
  pointer-events: none;
  position: fixed; z-index:9999; display:none;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
  font: 2em/1 sans-serif; color: #1CEA6E;
  opacity: 0.9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clip-popup">Copied to clipboard!</div>
Click an item to copy: <br>
<a class="clip">Lorem</a><br>
<a class="clip"><i>ipsum</i></a><br>
<a class="clip"><b>dolor</b></a><br>
<textarea placeholder="Paste here (or anywhere) to test"></textarea>

Ответ 6

Вы можете использовать локальный буфер обмена на странице HTML. Это позволяет копировать/вырезать/вставлять контент в HTML-страницу, но не от сторонних приложений или между двумя страницами HTML.

Вот как вы можете написать пользовательскую функцию для этого (проверено в chrome и firefox):

Вот FIDDLE, который демонстрирует, как вы можете это сделать.

Я также вставлю скрипт сюда для справки.


HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

Ответ 7

document.execCommand('copy') сделает то, что вы хотите. Но в этой нити не было непригодных примеров использования, но здесь это:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Ответ 8

Существует не так, вы должны использовать вспышку. Существует плагин JQuery под названием jquery.copy, который обеспечивает кросс-браузерную копию и вставку с использованием файла flash (swf). Это похоже на то, как работает ярлык синтаксиса в моем блоге.

После ссылки на файл jquery.copy.js все, что вам нужно сделать, чтобы вставить данные в буфер обмена, выполняется следующим образом:

$.copy("some text to copy");

Приятно и легко;)