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

Всем, доброго времени суток. Сегодня задача заключается в том, как выделить весь DIV, Span текст при щелчке мыши по кнопке с помощью JavaScript для копирования. Многие блогеры используют подобную опцию, чтобы дать своим посетителям не прокручивать содержание всего блока для копирования, а одним щелчком мыши скопировать сразу всю область. 

Что в итоге имеем

Выделяется все содержимое DIV/Span/Textarea с помощью кнопки.

Чистый JavaScript-Код.

Простота в использовании

Вы можете добавить неограниченное количество DIV даже на одну страницу / пост.

Вы можете добавить CSS стили на ID.

Он отменит выделение всего содержимого DIV/Span/Textarea так же с помощью кнопки.

Нам понадобиться вот такой готовый код, который вы сразу, тут же на странице,  сможете легко проверить (кликните по кнопке скопировать и вставьте у себя в черновике или блокноте), чтобы посмотреть, как это работает

<script type="text/javascript"> function fnSelectundefinedobjId) { fnDeSelectundefined); if undefineddocument.selection) { var range = document.body.createTextRangeundefined); range.moveToElementTextundefineddocument.getElementByIdundefinedobjId)); range.selectundefined); } else if undefinedwindow.getSelection) { var range = document.createRangeundefined); range.selectNodeundefineddocument.getElementByIdundefinedobjId)); window.getSelectionundefined).addRangeundefinedrange); } } function fnDeSelectundefined) { if undefineddocument.selection) document.selection.emptyundefined); else if undefinedwindow.getSelection) window.getSelectionundefined).removeAllRangesundefined); } </script> <div id="execodediv0"> А здесь будет зашифрованный код или просто текст </div> <center> <input onclick="javascript:fnSelectundefined'execodediv0');" title="скопировать код" type="submit" value="скопировать код" /> <input onclick="javascript:fnDeSelectundefined);" title="отменить копирование" type="submit" value="отменить копирование" /> </center>

Как это добавить на страницу

В сообщении переходим в формат HTML и в строке, отмеченной синим цветом, вставляем свой текст.

Для вебмастеров, которые публикуют свои коды для копирования, порядок немного другой. Следует сначала декодировать код. У меня здесь ENCODER кодов. Установить, так же как с текстом, вместо строки синего цвета этот декодированный код. Перейдя в формат вёрстки результат будет, как в примере выше.


Для нового Div на той же странице добавьте только этот код Div снова, но измените execodediv0 на execodediv1 в двух местах и т. д. Потом сохраните и всё.

Для информации предлагаю статью по теме - как копировать текст в буфер обмена кликом.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email