Linea de Codigo

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.

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

 
<form id="miform">
	<label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
	<textarea id="areatexto">Texto por defecto</textarea><br/>
	<button id="selectall">Seleccionar todo el texto</button>
</form>
 

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

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

... nos apoyamos en el método .select() para aplicarselo a un campo. Por ejemplo si queremos seleccionar el texto del campo con id 'texto' tendremos que codificar lo siguiente:

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

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. Que para acceder a los id de los elementos utilizamos una almohadilla delante del nombre. Y que 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?