Html copy to clipboard button

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

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

Самый простой и примитивный 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: Важное дополнение: по прежнему…

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

Источник

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;
>

Источник

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

Источник

How to Add a Copy to Clipboard button using HTML, CSS & JS

In this article, I will show you how you can create a copy to the clipboard button using HTML, CSS & Javascript and add it to your Blogger and WordPress website.

So, the copy to clipboard button helps you copy a whole paragraph using a single click and it gives users a better experience on the website. You can add this button to any of the HTML elements like a paragraph, blockquote, div, code box, etc. You just need to add the id in the HTML element and the Js code for the copy function to work. So, if you are providing any type of script or quotes, Shayari on your website then this tutorial will be super helpful to you. Users can copy the text in the clipboard with a click of a button. So, if you are a visual learner then you can watch this video and all the codes required for this will be provided down below.

Here, I have explained how to use this copy to clipboard button in Blogger.

How to Add a copy to clipboard button in Blogger & WordPress

To create the copy to the clipboard button, you need to first add the element in your post editor and then switch to HTML view and add an “Id” that we defined in the Javascript below. Then you have to add the button code below the element with the button Id and paste the Js code after it. So, if you are using a single button on a page then you just need to add the id in the HTML element only (like Blockquote, code box) and place the CSS and Js code after it. But, if you want to add multiple buttons on one page then you have to change the Button Id and the element id in the Javascript code as shown in the above video.

Looking for some already great color combinations? Our color chart features flat design colors, Google's Material design scheme and the classic web safe color palette, all with Hex color codes.
  Copy   

Click to Copy So, you can see the preview here. Just click on the above button and the codes in the code box will be copied to your clipboard with a single click. I hope you have already implemented this on the Blogger website. If you want to implement this Copy to Clipboard button in WordPress then you have to click on the Section and switch to HTML view. Now you can easily assign the Id in that element and switch back to preview mode.

After that just add a custom HTML block and paste the button code, CSS, and js code in it. You can remove the SVG code used in the button as it will not work properly in WordPress. WordPress Doesn’t allow us to use SVG directly due to security issues. But you can enable this using a plugin or custom Php file. How to enable SVG image upload in WordPress. Don’t you think this is a cool trick that you can apply to your website? Do let me know if this copy to the clipboard button is working on your website or not. I recommend you follow the video guide carefully to understand how the copy to clipboard button works. You can use this Click to copy button on both blogger and WordPress websites.

Источник

Copy URL to Clipboard on Button Click Examples

Here I am giving 3 examples to copy URL to clipboard on button click using JavaScript, jQuery, and HTML.

Example -1: Copy URL to Clipboard on Button Click Using JavaScript

In the below code, the JavaScript function copyToClipboard is written and specified on the onclick event of the button.

   Copy Link function copyToClipboard(text) 

Note: To improve the readability of the above JavaScript code, you can use the JavaScript beautifier online tool.

Output:

The output would be a button, and on the click, you will get the message «URL Copied.«.

Example -2: Copy Link to Clipboard on Button Click Using jQuery

The following is an example of a Copy URL to the clipboard using jQuery.

Output:

Example -3: Copy URL to Clipboard Using HTML

Output:

Related Topics

Источник