Seleccionar todo el texto en la entrada de texto HTML usando JavaScript

En este tutorial, aprenderemos cómo seleccionar todo el texto ingresado en una entrada HTML (campo) cuando se hace clic en un botón usando JavaScript.

Considere, tenemos el siguiente html input campo, button elemento.

<input id="place" value="King towers" />
<button id="select">Select Text</button>

Para seleccionar todo el texto presente dentro de un texto input cuando se hace clic en un botón, primero debemos acceder a los dos elementos anteriores dentro de un JavaScript usando el document.getElementById() método.

const input =  document.getElementById("place");
const btn = document.getElementById("select");

Ahora tenemos que adjuntar un click detector de eventos btn elemento, dentro del cual podemos seleccionar el texto de entrada usando el input.select() método.

btn.addEventListener("click",()=>{
   input.select(); 
})

También podemos seleccionar todo el texto en un input campo haciendo clic en el input campo mismo.

<input id="place" value="King towers" onclick="this.select()" />

Así mismo, podemos utilizar el input.setSelectionRange() método de paso 0, input.value.length como primer y segundo argumento.

const input =  document.getElementById("place");
const btn = document.getElementById("select");

btn.addEventListener("click", ()=>{
   input.focus(); 
   input.setSelectionRange(0, input.value.length);
})

Si quieres conocer otros artículos parecidos a Seleccionar todo el texto en la entrada de texto HTML usando JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas