Узнайте, как копировать текст в буфер обмена с помощью JavaScript.
Нажмите на кнопку, чтобы скопировать текст из текстового поля.
Копировать текст в буфер обмена
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить JavaScript:
Пример
function myFunction() <
/* Get the text field */
var copyText = document.getElementById(«myInput»);
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand(«copy»);
/* Alert the copied text */
alert(«Copied the text: » + copyText.value);
>
Примечание: Метод Document. ExecCommand () не поддерживается в IE9 и более ранних версиях.
Отображение скопированного текста во всплывающей подсказке
Пример
.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;
>
Одна вещь, что часто возникает при создании сайтов, это возможность копирования некоторого текста в буфер обмена без выбора пользователем или нажатия соответствующей комбинации, которую можно воспроизвести на клавиатуре. С этим действием, после установки, то само копирование знаков или текста, что прописал веб мастер, что идет на прямую в буфер обмена, не будет уж таким затруднительным, как многие считают. Он не должен требовать десятков шагов для настройки, что был усовершенствован, и как видите, все происходит мгновенно.
Стили идут под дизайн кнопок:
#kildsan <
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 2;
cursor:pointer;
border: 1px solid transparent;
border-radius: 4px
>
#kildsan <
color: #fffbfb;
padding: 8px 15px;
background-color: #2c5590;
border-color: #cac6c6;
>
#kildsan <
background-color: #4179ca;
border-color: #c1bdbd;
color: #fff;
>
#kildsan:hover <
color: #fff;
background-color: #337ab7;
border-color: #2e6da4
>
Довольно распространенный вариант использования копирование контента из другого элемента. Кроме того, если вы работаете с приложениями с одной страницей, вы можете более точно управлять циклом и на совершенно других.
На заметку: Стилистика, что здесь предоставлена, не как не влияет на функцию, так как она идет под кнопки. Просто сделано под Demo страницу для пользователя, при проверки материала.
Также, если у вас не конструктор uCoz, то нужно подключить библиотеку для корректной работы.
Функция на jQuery, которая позволяет скопировать нужный текст в буфер обмена пользователя
Иногда бывает нужно поставить кнопку, нажав на которую, пользователь мог бы занести в буфер обмена какой-то текст.
В данном примере этот текст берется не из полей формы, а со страницы.
Пример:
При нажатии на соответствующую кнопку ниже скопируется этот текст
Или этот, если нажать другую.
При нажатии на соответствующую кнопку ниже скопируется этот текст.
Или этот, если нажать другую.
Копирование происходит через функцию copytext(element) , например:
Добавить в буфер
Если в копируемом тексте не нужны переносы строк, то вместо:
- Опубликовано: 14.02.2019 / Обновлено: 05.06.2019
- Рубрики: Тексты, ссылки и кнопки — простые решения
- Метки: jQuery
- 2776 просмотров
Смотрите также:
Текст на размытом фоне
Наложение фильтра blur для размытия фона под текстом
SVG фильтры для создания эффекта дрожания
SVG фильтры, которые заставляют дрожать любые элементы сайта
Текст на ленточке
Маленький скрипт jQuery, который размещает текст на ленточке
Добавить комментарий:
Комментарии:
Доброго дня.
Если возможно, объясните пожалуйста каждую строку кода js, буду очень вам благодарен.
Спасибо за ответ
«);
я понимаю эту строку, как поиск тега
у меня на странице данного тега нет
такой строкой я могу любой тег в переменную положить?
select() — это выделить текст? Друг гугол не отвечает на этот вопрос)
document.execCommand(«copy»); — как этот метод понимает, что нужно скопировать наши данные?
я понимаю эту строку, как поиск тега
Нет, это создание переменной с ней (потом ее и вставляем)
Чтобы не вставлять 3 раза $(«
select() — это выделить текст? Друг гугол не отвечает на этот вопрос)
Да, это выделяет потом то что создали и куда вставили.
А это копирует то что выделили
Метод select() используется с элементом (с текстовым типом type = «text») и элементом
.
Поэтому нам и приходится создать такой временный элемент, воткнуть туда текст из нужного нам элемента, потом выделить, скопировать в буфер и удалить все это
А как убрать расстояние между двумя кнопками?