Скопируйте в буфер обмена с помощью щелчка JS

Question

Я знаю, что есть другие подобные примеры, окружающие этот вопрос. Но совсем не так.

Я пытаюсь скопировать значение ввода в буфер обмена пользователя с помощью JS и jQuery с помощью execCommand, но подозреваю, что я злоупотребляю им. Любое направление было бы высоко оценено.

Вот мой HTML:

<div class="2 columns"> 
    <div class="js swatch container"> 
     <div class="js swatch color chartreuse"></div> 
     <div class="swatch information"> 
      <span class="swatch title">Chartreuse</span> 
      <input class="js swatch data" type="text" value="#31bc06" readonly> 
     </div> 
    </div> 
</div> 

И вот мой JS:

// .js.swatch.container 
var swatchContainer = $('.js.swatch.container'); 
var swatchData = $('.js.swatch.data'); 
swatchContainer.mouseenter(function() { 
    $(this).children().children(swatchData).select(); 
}); 
swatchContainer.mouseleave(function() { 
    $(this).children().children(swatchData).blur(); 
}); 
// test 
swatchContainer.click(function() { 
    $(this).children().children(swatchData).execCommand('copy'); 
}); 

Спасибо заранее.

Answer 1

Вам нужно выбрать текст во временное место и позвонить по телефону .execCommand('copy'). У меня есть этот код, который работает для меня:

$(document).on('click', '.js.swatch.container', function() { 
    var $temp = $("<textarea>"); 
    $("body").append($temp); 
    $temp.val($(this).text()).select(); 
    var coppied = document.execCommand("copy"); 
    $temp.remove(); 
});