es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

“` Hide value on button copy “` “` Ocultar valor en botón copiar “`

Tengo este código:

<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id="accbtn1" data-target="accbtn1" class="copy_btn">mypassword</button>

<script>
function copyStringToClipboard (target) {
   var str = document.getElementById(target).innerText;
   var el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
}
</script>

Solo necesito que la palabra “mypassword” esté oculta del botón, pero sin ocultar el botón. ¿Existe alguna forma de copiar la palabra que establecí en el código HTML sin mostrarla?

Muchas gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Sí, puedes ocultar el texto “mypassword” del botón utilizando CSS para establecer el tamaño de fuente en cero. De esta manera, el texto seguirá estando ahí pero no será visible para el usuario. Aquí te muestro cómo puedes modificar el código:

    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id="accbtn1" data-target="accbtn1" class="copy_btn">
      <span class="hidden">mypassword</span>
    </button>
    
    <style>
      .hidden {
        font-size: 0;
      }
    </style>
    

    En este código modificado, el texto “mypassword” está envuelto dentro de un span con la clase “hidden” y la regla CSS establece el tamaño de fuente de esa clase en cero. Esto mantiene el botón visible pero oculta el texto. La función de Javascript aún copiará el texto oculto porque utiliza la propiedad innerText del elemento objetivo.

Comments are closed.