Скопировать строку в html

How TO — Copy Text to Clipboard

Learn how to copy text to the clipboard with JavaScript.

Click on the button to copy the text from the text field.

Copy Text to Clipboard

Step 1) Add HTML:

Example

Step 2) Add JavaScript:

Example

function myFunction() <
// Get the text field
var copyText = document.getElementById(«myInput»);

// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices

// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);

// Alert the copied text
alert(«Copied the text: » + copyText.value);
>

Display Copied Text in a Tooltip

Example

.tooltip <
position: relative;
display: inline-block;
>

.tooltip .tooltiptext visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
>

.tooltip .tooltiptext::after content: «»;
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
>

.tooltip:hover .tooltiptext visibility: visible;
opacity: 1;
>

Источник

Скопировать текст в буфер обмена нажатием на кнопку

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь — довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

Самый простой и примитивный HTML для примера:

 
 Чтобы не загружать мозг лишним кодом, в CSS будет только одно правило для скрытия сообщения об удачном копировании:

Ну и самая главная часть — скрипт, который выполнит всю работу:

$(function() < // copy content to clipboard function copyToClipboard(element) < var $temp = $(""); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); > // copy coupone code to clipboard $(".coupon-btn").on("click", function() < copyToClipboard("#coupon-field"); $(".coupon-alert").fadeIn("slow"); >); >);

Думаю, сильно подробно разбирать код нет смысла. Но в двух словах:

Функция copyToClipboard(element) скопирует в буфер содержимое заданного блока.

Копирование произойдет при нажатии на кнопку «.coupon-btn» .

copyToClipboard(«#coupon-field») — вызываем функцию copyToClipboard(element) и указываем, что нужно скопировать содержимое блока #coupon-field .

$(«.coupon-alert»).fadeIn(«slow»); — после копирования показываем сообщение, что что-то произошло и содержимое блока скопировано.

Ниже рабочий пример, в котором так же добавлено поле, чтобы вставить в него содержимое из буфера и проверить работоспособность кода:

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…

Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…

Простой пример, как убрать стрелки в поле input[type=»number»] с помощью CSS: Важное дополнение: по прежнему…

Часто в мобильной версии сайта используется кнопка типа «бургера» для вызова основного меню сайта. На…

Источник

Копирование текста в буфер обмена по клику

Иногда бывает нужно поставить кнопку, нажав на которую, пользователь мог бы занести в буфер обмена какой-то текст.

В данном примере этот текст берется не из полей формы, а со страницы.

Пример:

При нажатии на соответствующую кнопку ниже скопируется этот текст

Или этот, если нажать другую.

HTML:

При нажатии на соответствующую кнопку ниже скопируется этот текст.

Или этот, если нажать другую.

JS:

Подключаем библиотеку jQuery и:

Копирование происходит через функцию copytext(element) , например:

Если в копируемом тексте не нужны переносы строк, то вместо:

• Опубликовано: 14.02.2019 / Обновлено: 11.09.2020
• Рубрики: Тексты, ссылки и кнопки — простые решения
• Метки: jQuery
• 56114 просмотров

Смотрите также:

Заголовок, перекрывающий блок с рамкой

Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS

Текст во всю ширину родительского элемента

Выравнивание текста по всей ширине заданного блока

Фиксированная кнопка мессенджера

Анимированная кнопка с мессенджером, зафиксированная внизу страницы

Добавить комментарий:

Комментарии:

Здравствуйте. Подскажите пожалуйста. Как сделать так чтобы иконки которые на сайте, при клике на них, копировались в буфер обмена, спасибо?!

С картинками там все посложнее, поищите в интернете, например: Copy Image to Clipboard from Browser in Javascript, может что-то получится.
Я пару вариантов попробовал, не работают они, скорее всего из-за проблем с безопастностью.

function copytext(el) < var $tmp = $(""); $("body").append($tmp); $tmp.val($(el).text() + window.location.href).select(); document.execCommand("copy"); $tmp.remove(); >

Спасибо большое. Ссылка проставляется )
Если не трудно, скажите как еще сделать, чтобы при клике по кнопке появлялось сообщение, что текст скопирован. Пробовал ваше решение, предложенное для Ильдара — не сработало. Заранее спасибо.

Подскажите пожалуйста, как с наименьшим количеством кода показать пользователю, что текст скопировался? Может в поле на 0,5 секунд вывести текст «Скопировано», а через 0,5 секунд вернуть что было. Это нормальное решение или могут возникнуть проблемы?

В таком случае приходится вручную прописывать span с текстом «Скопировано», хотелось бы, чтобы функция создала такой span и вывела её над точкой, в которой был клик.

$('.copy').on('click', function(e) < $('.message').css(< "top": e.pageY, "left": e.pageX >) $('.message').fadeIn('fast').delay(800).fadeOut('slow'); >);

Решил менять текст на кнопке, но не могу понять как вернуть текст «Скопировать» на кнопке через 500 миллисекунд:

setTimeout("$('#copyButton').attr('value', 'Скопировать')", 500);

Здравствуйте.
Спасибо за код, работает, копирует. Но у меня даже с textarea копирует одной строкой. Может быть, есть ещё условия, чтобы соблюдался перенос строк?

Блин, всю голову поломал, а забыл, что мобильный браузер не умеет обновляться через Ctrl+F5. И пока я не почистил историю и не перезапустил браузер, ничего не работало. Сейчас всё отлично, извините за беспокойство.

Новая проблемка нарисовалась, при копировании кода, все превращается в «кашу» форматирование не сохраняется. Неудобно потом разгребать. Как решить проблему не пойму. Может есть идеи в кого?

Приветствую. Такая ситуация возникла: нужно дать посетителю возможность скопировать какой-то код (хтмл, цсс, скрипт) но при вставке кода ОН СРАБАТЫВАЕТ, т.е вместо например кода и стилей (которые должен скопировать посетитель) он копирует конечный результат, но не сам код. Вопрос: как вставить именно код (текстом) и дать возможность его скопировать? Пробовал закомментировать код через

А как выглядет конечный результат, который копируется?
И лучше конечно поглядеть визуально, как у вас что работает

И еще такой вопрос. Когда в тексте есть эмодзи, то они не копируются. Как сделать, чтобы с эмодзи все копировалось? Очень прошу помочь!

Нормально они копируются, только куда их потом втыкать вопрос.
Если в блокнотик, например, то он отображает их не все, ровно как и хром.

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

скопировал и сделал как на примере. не работает в итоге. может я что-то делаю не так. хотя все просто копирую как у автора. жаль то не вышло. буду искать еще.

А как можно отключить копирование в буфер обмена? Например, как на этой странице про копирование в буфер обмена Как будет выглядеть подобный скрипт?

Это чтобы контент не копипастили? 🙂
Ну чтобы прям отключить, это я думаю врядли возможно, но похимичить что нибудь можно.
Первый делом нужно отключить правую кнопку мыши, а потом, запретить, например, выделение текста или повесить другое событие на CTRL + C

$(document).keydown(function(e) < if (e.ctrlKey && e.keyCode === 67) < var $tmp = $(""); $("body").append($tmp); $tmp.val("Скопировали не то, что выделили").select(); document.execCommand("copy"); $tmp.remove(); > >);

function copytext(el) < var $tmp = $(""); $("body").append($tmp); // Вставляем временную переменную с полем для ввода $tmp.val($(el).text()).select(); // Вставляем в это поле данные нужного элемента и выделяем document.execCommand("copy"); // Копируем эти данные $tmp.remove(); // Удаляем временную переменную >

Спасибо за ответ var $tmp = $(««); <br />я понимаю эту строку, как поиск тега <textarea> <br />у меня на странице данного тега нет <br />такой строкой я могу любой тег в переменную положить? select() — это выделить текст? Друг гугол не отвечает на этот вопрос) document.execCommand(«copy»); — как этот метод понимает, что нужно скопировать наши данные?

Метод select() используется с элементом (с текстовым типом type = «text») и элементом .
Поэтому нам и приходится создать такой временный элемент, воткнуть туда текст из нужного нам элемента, потом выделить, скопировать в буфер и удалить все это

У меня копирование получается на ноутбуке, а на телефоне в safari не как не получается. Что можно сделать? Спасибо.

Ну это уже от браузера зависит.
Читать нужно именно про мобильные.
Скорее всего не дает он копировать из соображения безопасности какой то.

Источник

How to Copy Text to the Clipboard with HTML and JavaScript

Having a click-able button on your website that allows users to copy text can be easily achieved by using the document.execCommand() method.

Unfortunately support for the execCommand() method is lacking in many old browsers, such as Opera Mini and the UC Browser for Android.

The vast majority of users should be able to copy the text with out any issues and the website can display an error message if the copy command fails.

Additionally to work around browser support problem: As long as we put the text into a text box, it should be easy enough for users using these browsers to manually copy the text to the clipboard.

Copying Text From a Text Box to the Clipboard Using JavaScript

Demo:

HTML Code

JavaScript Code

After pressing the button, you should be able to paste the text into the text field below or in any other application that will accept text being pasted from the clipboard.

Here is a box that you can paste the text into so you don’t have to leave this page:

Unfortunately, due to security concerns, it is not possible to paste text using JavaScript into a browser window through JavaScript, unless it’s a background page of a browser extension. This is to prevent websites from gathering sensitive information such as user passwords.

There is also one big issue with this code, if the user currently has text selected, they will lose their selection. In the following examples, the code will restore the user’s previous text selection if they had one.

How to Copy Any Text By Creating a Selection Range in JavaScript

Since selecting all of the text in a text box using select() will only work with a text box, if you want to copy all text to the clipboard of a specific ID or class name, you will have to create a text selection range instead.

This is a little bit more flexible as you do not have to have a text box.

Demo:

HTML Code

The text to copy to the clipboard.
 
Copy The Text

Javascript Code

How to Copy Text To the Clipboard that Isn’t Visible with HTML

This is probably the most useful version of the script as it allows you to generate text in JavaScript, which is not visible on the page at all, then place that text on to the clipboard.

It works by creating an element that is off the screen with the text that is to be copied.

Since browser compatibility could be an issue, the script will also display an error message in a message box if it can’t copy the text. Using a message box isn’t the best way to handle this but you can customize the code to display the error notification any way you choose.

Demo:

Copy Some Text That You Can’t See!

HTML Code

Copy Some Text That You Can't See!

JavaScript Code

I really hope that you enjoyed this tutorial!

Read More From Actual Wizard

An email address has four parts; the recipient name, the @ symbol, the domain name, and the top-level domain. …

There are a number of different ways to get the last element of an array in JavaScript. Below we will explore …

How to use document.write() in JavaScript The document.write() function is commonly used when testing simple …

Opening a new browser window in a new tab can be done easily in JavaScript. Modern web browsers provide a …

Primary Sidebar

More posts from this section

Copyright © 2023 ActualWizard.com

Источник