dev [JS] Elemento para copiar texto.

Pica-Pau · Dezembro 20, 2017

Nego tem me perguntado como faz essa porcaria, então eu vou ensinar aqui. É puro JavaScript.

Basicamente você cria um elemento e quando esse elemento é clicado copia um texto. Simples.

HTML:

<html>
  <head>
    <title>DevNatan ROLUDO</title>
  </head>
  <body>

    <button data-transform="Copie e cole kk" data-transform-text="Novo texto" data-transform-delay="5" id="Um id qualquer">

Clique em mim para copiar qualquer porcaria

</button>

</body> </html>

JAVASCRIPT:

document.querySelector('[data-transform]').addEventListener('click', function(e) {
	copyTransform(this.id);
});

function copyTransform(id) {
  var ele 	= document.getElementById(id);
  var area 	= document.createElement("textarea");
  var copy 	= getTransform(id);
  var delay     = getTransformDelay(id);
  var text 	= getTransformText(id);
  
  var cache = ele.textContent;
  
  area.value = copy;
  
  document.body.appendChild(area);
	area.select();

	try {
		document.execCommand("copy");
    ele.textContent = text;
    
    setTimeout(function() {
    	ele.textContent = cache;
		}, delay * 1000);
	} catch (e) {
		alert("Ocorreu um erro ao copiar, tente novamente.");
	}

	document.body.removeChild(area);
}

function getTransform(id) {
	return document.getElementById(id).getAttribute("data-transform");
}

function getTransformDelay(id) {
	return parseInt(document.getElementById(id).getAttribute("data-transform-delay"));
}

function getTransformText(id) {
	return document.getElementById(id).getAttribute("data-transform-text");
}

Editado Dezembro 20, 2017 por Pica-Pau

CrashyTop · Dezembro 20, 2017

Muito bom, vai ajudar muitos iniciantes em dev.

Dery · Dezembro 20, 2017

Óia só, ele quer ser auto suficiente, não usa jQuery

Boa, do jeito que o pai ensinou

Entrar

dev [JS] Elemento para copiar texto.

Posts Recomendados

Pica-Pau

Link para o comentário

Compartilhar em outros sites

CrashyTop

Link para o comentário

Compartilhar em outros sites

Dery

Link para o comentário

Compartilhar em outros sites

Participe da Conversa

Conteúdo Similar

Popular Agora

Quem está navegando 0 membros estão online

Equipe