Seleccionar el texto de un campo

Seleccionar el texto de un campo nos posibilita guiar al usuario de nuestra web en la edición de textos. La idea es dejarle un campo marcado dentro del formulario. Para ello nos vamos a apoyar en jQuery.

El Formulario

Lo primero es poner el formulario. Nada complicado si sabes HTML:

<form id="miform">
  <label for="texto">Inserta texto:</label>
  <input id="texto" size="100" type="text" value="Texto por defecto"></input>

  <textarea id="areatexto">Texto por defecto</textarea>

  <button id="selectall">Seleccionar todo el texto</button>
</form>

Cargar jQuery

Ahora, y tras haber cargado nuestra librería jQuery:

<script src="jquery.js" type="text/javascript"></script>

Seleccionar el Texto de un Campo

Nos apoyamos en el método .select() para aplicarlo a un campo. Por ejemplo, si queremos seleccionar el texto del campo con id ‘texto’ tendremos que codificar lo siguiente:

$("#texto").select();

Seleccionar Todo al Hacer Click

Otra opción es hacerlo bajo demanda. Lo que viene a ser el típico botón de “Seleccionar Todo”. Que en nuestro caso hemos representado con un elemento button.

En jQuery conseguiremos capturar el click sobre el botón con el método .click(). Así el código quedará de la siguiente forma:

$("#selectall").click( function(){
  $("#areatexto").select();
  return false;
});

Hay que tener en cuenta dos cosas:

• Para acceder a los id de los elementos utilizamos una almohadilla (#) delante del nombre.
• Al final del .click() hemos utilizado un return false para parar el evento generado por el botón.

Ya hemos visto dos formas muy sencillas de seleccionar el texto de un campo. ¿Se te ocurre otra forma?