Seleccionar un texto solo si no ha cambiado

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 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.

El Formulario

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

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

  <label for="areatexto">Cada vez que pinches en el área de texto se seleccionará. Esto sucederá mientras no cambies el contenido original del mismo.</label>
  <textarea cols="25" id="areatexto" rows="8">Texto por defecto</textarea>
</form>

Hay que fijarse bien que hemos puesto los campos input y textarea con textos por defecto. Será cuando el usuario acceda al campo cuando comprobaremos si ha cambiado el texto.

Detectar el Focus

Para detectar cuando el usuario accede al campo utilizamos el método .focus() de jQuery. En este caso vamos a ver cómo sería para el textarea.

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

Comparar Valor Actual con Valor por Defecto

Ahora tenemos que diferenciar cómo 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, llamaremos al método .select() si son iguales.

$(document).ready(function(){
  $("textarea").focus(function(){
    if(this.value == this.defaultValue){
      this.select();
    }
  });
});

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