Seleccionar un texto solo si no ha cambiado

11/Oct/2011 jQuery , 4 Comentarios

Unos cuantos han sido los artículos que le hemos dedicado a la selección de texto con jQuery: Seleccionar el texto de un campo, Seleccionar el texto al posicionarse en un campo y Detectar el texto seleccionado con jQuery. Pero no quería dejar de escribir uno que nos va a dar un buen efecto visual y este consiste en seleccionar un texto solo si este no ha cambiado con jQuery.

Es decir, seleccionaremos el texto del campo si sigue siendo el mismo que al cargar la página. Si el usuario ha cambiado el contenido, ya no lo seleccionaremos.

Manos a la obra... Lo primero el formulario al uso (casi que ya lo imaginas).

  1. <form id="miform">
  2. <label for="texto">Inserta texto:</label>
  3. <input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
  4. <label for="areatexto">Cada vez que pinches en el &aacute;rea de texto se selecionará. Esto sucederá mientras no cambies el contenido original del mismo.</label><br/>
  5. <textarea id="areatexto" cols="25" rows="8">Texto por defecto</textarea><br/>
  6. </form>

Hay que fijarse bien que hemos puesto los campos input y textarea con textos por defecto.

Será cuándo el usuario acceda al campo cuando comprobaremos si ha cambiado el texto. Para ello utilizamos el método .focus() de jQuery. En este caso vamos a ver cómo sería para el textarea.

  1. $(document).ready(function(){
  2. $("textarea").focus(function(){...});
  3. });

Ahora tenemos que diferenciar como conseguir el texto que tiene actualmente y el texto que estaba por defecto. El texto actual lo conseguiremos con .value y el texto por defecto con .defaultValue.

Así que seleccionaremos el texto, es decir, lamaremos al método .select() si son iguales.

  1. $(document).ready(function(){
  2. $("textarea").focus(function(){
  3. if(this.value == this.defaultValue){
  4. this.select();
  5. }
  6. });
  7. });

Así ya hemos seleccionado el texto solo si este no ha cambiado.

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D