Как вы можете выбрать текст в div (для копирования в буфер обмена) из JavaScript?

Question

У меня есть div, содержащий некоторый текст, который я хотел бы, чтобы пользователь мог легко скопировать со страницы (через буфер обмена). Существует ли кросс-браузерный способ выделения всего текста внутри div при щелчке мышью?

Answer 1

Кросс-браузерная поддержка для копирования буфера обмена через Javascript требует использования Flash для обхода безопасности Firefox / Netscape, которая запрещает доступ к буферу обмена. Если вы используете jQuery , вы можете легко использовать плагин clipboard . Если вы катите свой собственный Javascript без использования jQuery, тогда это сообщение в блоге может помочь.

Кроме того, вы можете настроить разрешения безопасности Firefox, чтобы разрешить сценариям доступ к вашему буферу обмена. Хорошее прохождение доступно на dojotoolkit.org. Обычно это не тот путь, по которому нужно идти, так как это потребует от каждого вашего пользователя внесения изменений. Намного проще использовать Flash, поскольку он работает со всеми современными браузерами (Safari, IE, Firefox и Opera).

Answer 2

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>    

function ClipBoard() 
    {
    holdtext.innerText = copytext.innerText;
    Copied = holdtext.createTextRange();
    Copied.execCommand("Copy");
    }

Отсюда

Answer 3

Взгляните на эти оба: http://yangshuai.googlepages.com/jquerycopyplugin http://plugins.jquery.com/project/clipboard

Answer 4

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

В итоге я просто сделал это:

function selectIncidentIDText (incidentIDTxtEl) {
    incidentIDTxtEl.select();
}
<h:inputText value="(IncidentID: #{ViewIncidentBean.incident.id})" readonly="true" onclick="selectIncidentIDText(this);"/>

Это работает достаточно хорошо для того, что я хотел, хотя это немного некрасиво.

Answer 5

Этот вопрос может иметь некоторые подсказки для вас.