Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

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

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

1
Создали ZeroBlock
2
Добавили форму, добавили в неё поле Textarea - 4 lines - задали имя quotetext
(Если нужна не форма, а просто текст в Zero, то задаём ему этот класс quotetext и меняем значение переменной в коде c inputArea = true на inputArea = false
3
Создали кнопку с классом copytext
4
Добавили код в блок Другое - Т123
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        //Если копируем из поля ввода, то пишем true
        //Если просто текст с классом quotetext, то пишем false
        let inputArea = true; 
        
        const div = document.createElement('div');
        div.className = 'alertmessage t-text';
        div.innerHTML = '<p>Текст скопирован в буфер</p><p class="copylink"></p>';
        document.getElementById('allrecords').append(div);
        
        document.querySelector(".copytext").addEventListener('click', function(event) {
            let copyquote = '';
            if(inputArea){
                copyquote = document.querySelector('[name="quotetext"]').value;
            }else{
                copyquote = document.querySelector('.quotetext').innerText;    
            };
            
            if ( copyquote.trim().length) copyFunction(copyquote);
        });
        
        
        function copyFunction(copy) {
            const 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);
            const alertmessage = document.querySelector('.alertmessage');
            alertmessage.classList.add("showalertmessage");
            setTimeout(function(){
                alertmessage.classList.remove("showalertmessage")
            }, 1000);
        };
        
    })();    
});    
</script>


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

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

Made on
Tilda