Как сделать кнопку 'копировать текст' из поля ввода в Tilda
Копировать

Как сделать кнопку 'копировать текст' из поля ввода в Tilda

1
Создали ZeroBlock c формой
2
В форме добавили поле Textarea - 4 lines - задали имя quotetext
3
Создали кнопку с классом copytext
4
Добавили код в блок Другое - Т123
Библиотека для примера
<div class="alertmessage">
    <p>Текст скопирован в буфер</p>
    <p class="copylink"></p>
</div>

<style>
.alertmessage {
    position: fixed;
    width: 100%;
    height: 70px;
    top: 0;
    z-index: 999999;
    background-color: #fa876b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto',Arial,sans-serif;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
    transform: translateY(-100%);
}
p.copylink {
    font-size: 14px;
    font-weight: 300;
    margin-top: 5px;
    opacity: 0.7;
}
.showalertmessage{transform: translateY(0%)}
.copytext{ cursor:pointer}
.t-input-group_ta textarea.t-input {
    resize: none;
    background-color: rgb(0, 0, 0, 0.42) !important;
}
</style>

<script> 
$(document).ready(function(){
$('.copytext .tn-atom').click(function(e) {e.preventDefault();
let copyquote = $('[name="quotetext"]').val();
if ( copyquote.trim().length > 0) {copyFunction(copyquote)};
});
function copyFunction(copy) {
    var textArea = document.createElement("textarea");
	textArea.value = copy;
	textArea.style.position = "fixed";  
	document.body.appendChild(textArea);
	textArea.focus();textArea.select();document.execCommand('copy');
	document.querySelector('.copylink').innerHTML = textArea.value;
	document.body.removeChild(textArea);
    let alertmessage = document.querySelector('.alertmessage');
    alertmessage.classList.add("showalertmessage");
    setTimeout(function(){alertmessage.classList.remove("showalertmessage")}, 1000);
};
});
</script>

Текст скопирован в буфер

Made on
Tilda