Ir para conteúdo
diegoxlz

Como copiar conteúdo de duas div's ao mesmo tempo?

Recommended Posts

Esse é o HTML

<div id="markup">
  Text that can be copied or selected with cross browser support.
</div>
<br><br>
não copiar esse texto
<br><br>
<div id="markup2">
  Copiar o texto 2
</div>
<br><br>

<button id="botaodecopiar1">copiar!</button>

 

E esse é o Javascript>
 

<script type="text/javascript">
        function selectElementContents(el) 
{
    // Copy textarea, pre, div, etc.
	if (document.body.createTextRange) {
        // IE 
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");     
    }
	else if (window.getSelection && document.createRange) {
        // non-IE
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range); 
        try {  
		    var successful = document.execCommand('copy');  
		    var msg = successful ? 'successful' : 'unsuccessful';  
		    console.log('Copy command was ' + msg);  
		} catch(err) {  
		    console.log('Oops, unable to copy');  
		} 
    }
} // end function selectElementContents(el) 

function make_copy_button(el)
{
	var botaodecopiar = document.getElementById('botaodecopiar1');
	botaodecopiar.onclick = function() { selectElementContents(el); };
	
	if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42)
	{
		// Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+
		botaodecopiar.value = "Copy to Clipboard";
	}	
	else
	{
		// Select only for Safari and older Chrome, Firefox and Opera
		botaodecopiar.value = "Select All (then press CTRL+C to Copy)";
	}
}
var elem = document.getElementById("markup");
var elem2 = document.getElementById("markup2");
make_copy_button(elem2);
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 horas atrás, _Isis_ disse:

você copia primeiro um e depois o outro.

 


var divsToCopy = ['markup', 'markup2'];

divsToCopy.forEach(make_copy_button);

Não funcionou, não copiou nenhuma nem outra :(

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 17/07/2017 at 08:41, _Isis_ disse:

você copia primeiro um e depois o outro.

 


var divsToCopy = ['markup', 'markup2'];

divsToCopy.forEach(make_copy_button);

Não funcionou, não copiou nenhuma nem outra :(

 

 

Já encontrei a solução, era só colocar CSS no elemento que não quero que passe a seleção:

   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Conteúdo Similar

    • Por Kleb.Gomes
      Olá.
      Estou com a seguinte dúvida:
      Tento fazer com que o usuário digite 3 valores de um triângulo em um input cada.
      Logo em seguida, o código deve mostrar se os valores satisfazem os requisitos para que o triângulo exista e, além disso, qual o tipo do triângulo.
      Não sei se o ideal seria aqui ou em HTML5.
      Com ele todo em JS eu consigo fazer, mas quero aprender mais.
       
      <meta charset="UTF-8"> <html> <head> <script type="text/javascript"> //esta função mostra uma frase no navegador e pula uma linha. var mostra = function(frase){ document.write(frase + "<br>"); }; //esta função verifica se a condição de existência do triângula é suprida. function condicao_existencia(){ var n1 = parseInt(document.getElementById('base')); var n2 = parseInt(document.getElementById('ladob')); var n3 = parseInt(document.getElementById('ladoc')); if (n1 < n2 + n3 && n2 < n3 + n1 && n3 < n1 + n2){ document.getElementById('existencia').value = "Esses números satisfazem a condição de existência de um triângulo"; } else{ document.getElementById('existencia').value = "Esses números não satisfazem a condição de existência de um triângulo"; }; tipo_triangulo(); }; //esta função checa que tipo de triângulo é function tipo_triangulo(){ if (n1 === n2 && n2 === n3) { document.getElementById('tipo').value = "Esses valores podem formar um triângulo EQUILÁTERO"; }; if (n1 != n2 && n2 != n3 && n3 != n1){ document.getElementById('tipo').value = "Esses valores podem formar um triângulo ESCALENO"; }; if (n1 != n2 && n2 === n3) { document.getElementById('tipo').value = "Esses valores podem formar um triângulo ISÓSCELES"; }; }; //variáveis var n1 = parseInt(document.getElementById('base')); var n2 = parseInt(document.getElementById('ladob')); var n3 = parseInt(document.getElementById('ladoc')); </script> </head> <body> <center> <font size="8" color="purple">PROGRAMA PARA CÁLCULO DE TRIÂNGULO</font><br><br> <form> Informe o valor da base (a) do triângulo: <input type="text" id="base"><br> Informe o valor do lado b do triângulo: <input type="text" id="ladob"><br> Informe o valor do lado c do triângulo: <input type="text" ide="ladoc"><br> <input type="button" id="calcular" value="Verificar Triângulo" onclick="condicao_existencia();"><br> Validade do triângulo: <input type="text" id="existencia"> <br> Tipo de triângulo: <input type="text" id="tipo"> </script> </form> </body> </html>  
    • Por ociceromartins
      Olá pessoal,
      Preciso fazer um post para um URL e interpretar o javascript na página, ao invés de simplesmente pegar todo o código impresso na página.
       
      Tentei fazer isso definindo User-Agent, mas ao fazer isso ele me retorna 403 Forbidden. Se tiro o User-Agent funciona!
       
      User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36  
      Alguém sabe como posso fazer um POST no Delphi e interpretar os códigos javascripts e não simplesmente recuperá-los como "plain text"?
       
      HTTP.Request.Accept := 'Accept:*/*'; HTTP.Request.UserAgent := 'User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0'; HTTP.Request.ContentType := 'application/json'; HTTP.Request.Connection := 'Keep-Alive'; HTTP.HandleRedirects := True; Post.Add('id=123'); Result := HTTP.Post('MINHA URL', Post);  
      Este é o código que estou utilizando para a requisição!
       
      Aguardo retorno.
       
      Obrigado!
    • Por manoaj
      Boa tarde pessoinhas :D
       
      Eu to quebrando a cabeça aqui pra tentar criar uma paginação da seguinte forma.
       
      Tenho uma lista dentro de um UL que e carregada dinamicamente por ajax, faço uma busca no banco e tal e imprimo na tela com ajax todos os LI`s dentro do ul.
      já que os LI são carregados e inseridos dinamicamente eu n posso contar os li nem pegar primeiro, ultimo, valores de atributo e tal.
      O que eu quero fazer e o seguinte quando tiverem mais de 10 itens na lista eu quero ocultar o restantes e exibir somente os 10 primeiros e logo abaixo exibir um botão para carregar +10 e assim por diante ate acabar a lista.
      Como eu posso fazer isso já que os elementos da minha listas são inseridos e criados pelo ajax dinamicamente?????
    • Por vpontessilva
      Olá senhores, estou criando uma aplicação simples em AngularJS, a aplicação se resume em 3 páginas:
      1 - Aparelho: Onde a pessoa escolhe o aparelho
      2 - Planos: Escolhe o plano relacionado ao aparelho
      3 - Cadastro final informando nome, e-mail, telefone e etc...
       
      A lista de aparelhos e e de planos possiveis praquele aparelho escolhido vem de um arquivo JSON, que eu pego através de uma requisição HTTP
      A dúvida é: Eu gostaria de ir salvando essas informações, quando ele clicar em um aparelho, salvasse, depois o plano e salvasse e depois de escrever os dados
      salvasse tudo e saisse na página final e um console.log, mas como faço isso? Tô perdido.. 

      Esse é o meu arquivo api.js, onde faço a requisição dos aparelhos:
      // plataformas //arquivo api.js app.controller('plataformAPI', function($scope, $http){ $http.get('http://private-59658d-celulardireto2017.apiary-mock.com/plataformas') .then(function(response){ $scope.dados = response.data.plataformas; }); }); Esse é o arquivo home.html, onde a pessoa escolhe os aparelhos:
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center" ng-controller="plataformAPI"> <div ng-repeat="x in dados"> <h1>{{x.nome}}</h1> <p>{{x.descricao.replace('|',' ')}}</p> <p><a class="btn btn-primary btn-md" href="{{prefix + x.nome}}" role="button">Quero esse</a></p> </div> </div> Eu gostaria de salvar o nome do aparelho que ele clicou.. 
    • Por Melkis
      Estou com um grande problema tenho imagens irregulares preciso recorta-las e salvar em um outro arquivo, até aí tudo bem, o problema é que o sistema que estou criando é totalmente responsivo, e o script abaixo delimita o tamanho da imagem, o script está cortando, salvando aimagem em png, tudo está funcionando perfeitamente, o único problema é ele não se adequar responsivo, quem souber como posso pegar os eixos x e y atuais da tela e coloca-los dentro das variáveis que fazem, pois tentei o .resize mas não deu certo, Aguardo anciosamente a resposta, muito obrigado seguem os links para que possam entender o eu eu estou querendo fazer:
      Para terem uma ideia melhor do que estou falando segue o link de um site com cropper.js em quadros e responsivo: https://fengyuanchen.github.io/cropperjs/
      E aqui o link com exemplo de crop poligonal, https://netplayer.gr/crop/
      //funçao para fazer um crop na imagem $(document).ready(function() { var condition = 1; var points = [];//holds the mousedown points var canvas = document.getElementById('myCanvas'); this.isOldIE = (window.G_vmlCanvasManager); $(function() { // if (document.domain == 'localhost') { if (this.isOldIE) { G_vmlCanvasManager.initElement(myCanvas); } var ctx = canvas.getContext('2d'); var imageObj = new Image(); function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } // Draw image onto the canvas imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = "img.png"; // Switch the blending mode ctx.globalCompositeOperation = 'destination-over'; //mousemove event $('#myCanvas').mousedown(function(e) { if (condition == 1) { ctx.beginPath(); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); } }); //mousedown event $('#myCanvas').mousemove(function(e) { if (condition == 1) { if (e.which == 1) { var pointer = $('<span class="spot">').css({ 'position': 'absolute', 'background-color': '#000000', 'width': '5px', 'height': '5px', 'top': e.pageY, 'left': e.pageX }); //store the points on mousedown points.push(e.pageX, e.pageY); //console.log(points); ctx.globalCompositeOperation = 'destination-out'; var oldposx = $('#oldposx').html(); var oldposy = $('#oldposy').html(); var posx = $('#posx').html(); var posy = $('#posy').html(); ctx.beginPath(); ctx.moveTo(oldposx, oldposy); if (oldposx != '') { ctx.lineTo(posx, posy); ctx.stroke(); } $('#oldposx').html(e.offsetX); $('#oldposy').html(e.offsetY); } $(document.body).append(pointer); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); }//condition }); $('#crop').click(function() { condition = 0; // var pattern = ctx.createPattern(imageObj, "repeat"); //ctx.fillStyle = pattern; $('.spot').each(function() { $(this).remove(); }) //clear canvas //var context = canvas.getContext("2d"); //Delimita o tamanho da imagem isso já retira a base responsiva da imagem ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); ctx.width = 350; ctx.height = 350; ctx.globalCompositeOperation = 'destination-over'; //draw the polygon setTimeout(function() { //console.log(points); var offset = $('#myCanvas').offset(); //console.log(offset.left,offset.top); for (var i = 0; i < points.length; i += 2) { var x = parseInt(jQuery.trim(points[i])); var y = parseInt(jQuery.trim(points[i + 1])); if (i == 0) { ctx.moveTo(x - offset.left, y - offset.top); } else { ctx.lineTo(x - offset.left, y - offset.top); } //console.log(points[i],points[i+1]) } if (this.isOldIE) { ctx.fillStyle = ''; ctx.fill(); var fill = $('fill', myCanvas).get(0); fill.color = ''; fill.src = element.src; fill.type = 'tile'; fill.alignShape = false; } else { var pattern = ctx.createPattern(imageObj, "repeat"); ctx.fillStyle = pattern; ctx.fill(); var dataurl = canvas.toDataURL("image/png"); //upload to server (if needed) var xhr = new XMLHttpRequest(); // // xhr.open('POST', 'upload.php', false); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var files = dataurl; var data = new FormData(); var myprod = $("#pid").val(); data = 'image=' + files; xhr.send(data); if (xhr.status === 200) { console.log(xhr.responseText); $('#myimg').html('<img src="upload/' + xhr.responseText + '.png"/>'); } } }, 20); }); // } }); }); Para interessados em testar é só adicionar as tags: <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>   e colocar um <canvas> no <body> da pagina:   <canvas id="myCanvas"></canvas>   Desde já Muito Obrigado a todos   javascript canvas jcrop  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: