How I do a Ctrl+C something inside a form with a button using javascript

Asked

Viewed 54 times

0

I have a form and a button next to it. I need to copy the information in this form by just clicking on the javascript button. The form, button and function attempt of CRTL+C is this:

HTML

<label for="disable_date">URL</label>
<div class="input-group-append">
              <input
                type="text"
                class="form-control dropdown-toggle"
                id="input_url"
              />
              <span onclick="copyText(this)" >
              <button class="btn btn-outline-info" type="button">
                <i class="dripicons-copy"></i>
              </button>
            </span>
          </div>

JAVASCRIPT

copyText(element) {
          var txt = '';
            if (window.getSelection)
            txt = window.getSelection(); 
            else if (document.getSelection)
            txt = document.getSelection();
            else return;
            document.getElementById("a").value=txt;
            allCopied =document.getElementById("a").createTextRange();
            allCopied.execCommand("RemoveFormat");
            allCopied.execCommand("Copy");
          },

2 answers

2

For better digestion of logic and study functions on the sites each function, so you can better understand...

MDN

W#Schools

// FUNCAO COPIAR
function copiar () {

const

// CRIA VARIAVEL COM REFERENCIA DO ELEMENTO INPUT
ele = document.querySelector ('input'),

// CRIA VARIAVEL COM REFERENCIA DO ELEMENTO INPUT (OPC 2)
ele_id = document.getElementById ('ele-input');

// SELECIONA VALOR DO ELEMENTO
ele.select();

//ele_id.select();

// FUNCAO execCommand COPIA O VALOR DO ALVO
document.execCommand ('copy');

};

const

// CRIA VARIAVEL COM REFERENCIA DO ELEMENTO BOTAO QUE SERA RESPONSAVEL POR ACIONAR O EVENTO DE INTERACAO COM USUARIO E EXECUTAR A FUNCAO DE COPIAR
btn_copiar = document.getElementById ('btn-copiar');

// FUNCAO addEventListener ADICIONA EVENTO DO TIPO CLIQUE AO ELEMENTO BOTAO COM LIGACAO A FUNCAO COPIAR CASO SEJA CLICADO
btn_copiar.addEventListener ('click', copiar);
<input id="ele-input" type="text" value="COPIAR TEXTO" required>

<button id="btn-copiar"> COPIAR </button>

1

function copyText() {
  /* Encontra o texto a ser armazenado */
  var copyText = document.getElementById("input_url");

  /* Seleciona o texto do input */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*Solução para dispositivos móveis*/

  /* Copia o texto */
  document.execCommand("copy");
}
<!-- O campo a ser copiado -->
<input 
  type="text" 
  class="form-control dropdown-toggle" 
  id="input_url" 
/>

<!-- Botão -->
<span onclick="copyText()" >
  <button class="btn btn-outline-info" type="button">
    <i class="dripicons-copy">Copiar</i>
  </button>
</span>

Source

  • 2

    Hello Vitor, I wasn’t going to comment, but I must say, that’s why I don’t like w3schools copyText.setSelectionRange(0, 99999);, is so much non-sense, it seems that those who create the examples barely know how to program in the languages of which they "document", it seems that they came across any error and put a 999999 to force solve.

  • It’s weird, but it seems like an exception-only solution. Modern browsers don’t need that. I believe however that completes the answer, so I kept

  • 1

    I will test, I try some Vms and emulators for cases so, after return, anyway it was rare the times I saw something good come out of w3schools, unfortunately although many people use it is not a good source, are codes that work, but in practice does not teach what each method/function does exactly and perhaps why such situations appear as this 99999 of them

  • 1

    Beauty, and thank you so much for the feedback!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.