Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Копировать текст в буфер обмена клавиатуры на JavaScript
Этот пример позволяет по нажатию кнопки скопировать текст в буфер обмена.
Исходный код этого примера:
<style>
input[type="text"], button {
padding: 5px 10px;
}
.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: 120%;
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;
}
</style>
<div style="border: 2px solid blue; padding: 20px;">
<input type="text" value="Всем привет!" id="myInput">
<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
<span class="tooltiptext" id="myTooltip">Скопировать в буфер обмена</span>
Копировать
</button>
</div>
<script type="text/javascript">
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Скопировано: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Скопировать в буфер обмена";
}
</script>
</div>
.
Прокомментировать/Отблагодарить