Linea de Codigo

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

 
<form id="miform">
  <label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
  <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/>
  <textarea id="areatexto" cols="25" rows="8">Texto por defecto</textarea><br/>
</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.

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

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.

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

jQuery nos permite manejar de forma muy sencilla los formularios con un amplio conjunto de métodos. En este caso vamos a ver cómo podemos acceder a la lista de opciones seleccionadas de un combo y mostrarlas por pantalla utilizando la librería jQuery.

En primer lugar vamos a pintar el combo (esta vez va de fútbol):

 
<form id="myform">
<select id="equipos" multiple="multiple">
<option value="barça" selected="selected">Barça</option>
<option value="real madrid">Real Madrid</option>
<option value="atletico madrid">Atl&eacute;tico Madrid</option>
<option value="valencia">Valencia CF</option>
<option value="betis" selected="selected">Real Betis</option>
<option value="deportivo">Deportivo de la Coruña</option>
</select>
</form>
 

Si queremos que puedan existir varias opciones seleccionadas dentro del combo deberemos de utilizar el atributo multiple="multiple" dentro del select. De igual manera, si queremos prefijar una de las opciones deberemos de utilizar el atributo selected="selected".

Listaremos las opciones seleccionadas del combo cada vez que haya un cambio en dicho combo. Para ello vamos a manejar el método .change() de jQuery. En cada cambio ejecutaremos la función que le digamos al método .change().

$(document).ready(function(){
  $("#equipos").change(function(){
    ...
  });
});

Y ¿qué va a hacer nuestra función? Pues recorrer el elemento select. Pero no todo el elemento select, si no aquellas opciones que estén seleccionadas. Así que vamos a utilizar un selector. El selector será:

#equipos option:selected

Es decir, del combo o select 'equipos' elige aquellas opciones, u option, que estén seleccionadas, es decir 'selected'.

Ahora, de cada opción obtendremos su valor mediante el método .text()

$("#equipos option:selected").each(function() {
  texto += $(this).text() + " - ";
});

Ya solo nos quedará volcar el contenido en alguna capa de nuestra página. Para ello creamos un elemento DIV al que llamaremos 'resultado' y al que volcaremos los datos mediante:

$("#resultado").text(texto);

Solo nos queda un pequeño detalle. Y es que si hemos puesto campos seleccionados de antemano, si queremos que se ejecute nuestro método .change(), podemos simular el ejecutarlo mediante el método .trigger()

$("#equipos").trigger('change');

De esta manera tendremos la primera ejecución del .change(). El código entero nos quedará de la siguiente forma:

$(document).ready(function(){
  $("#equipos").change(function(){
 
    var texto = "Opciones Seleccionadas: ";
    $("#equipos option:selected").each(function() {
      texto += $(this).text() + " - ";
    });
 
    $("#resultado").text(texto);
 
  }).trigger('change');
});

Si el otro día vimos como seleccionar el texto de un campo (por defecto o mediante un click del usuario), hoy vamos a ver como seleccionar texto al posicionarse en un campo con jQuery. Es decir, al ir moviéndonos por los campos y llegar al determinado campo seleccionaremos el texto.

Controlar el posicionarse en un campo lo podremos hacer mediante el método .focus() de jQuery. Pero lo primero, el formulario. Como siempre, algo simple:

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

Como la selección del texto al posicionarse en un campo lo vamos a aplicar a todos los campos input (de tipo text) vamos a utilizar un selector.

input[type=text]

Así que el método .focus() se quedará de la siguiente forma:

$("input[type=text]").focus(function(){ ... });

Ya solo nos quedará realizar la selección del campo de texto mediante el método .select() de jQuery.

$("input[type=text]").focus(function(){
  this.select();
});

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?

Cuando ponemos campos de entrada en nuestras páginas web, el usuario podrá seleccionar parte del texto que haya en dichos campos. Vamos a ver como detectar el texto seleccionado utilizando jQuery.

Lo primero será poner un textarea con un texto de ejemplo:

 
<form id="miform">
  <textarea id="texto" rows="20" cols="100">Lorem ipsum dolor sit amet...</textarea>
</form>
 

Para utilizar jQuery tendremos que cargar la librería de jQuery:

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

El método de jQuery que nos ayudará a detectar el texto seleccionado es .select(). Este método habrá que asignarlo al elemento de la página sobre el que queremos detectar el texto seleccionado. En nuestro código el textarea 'texto'.

$("#texto").select(function(){	... });

El contenido que ha sido seleccionado se puede recuperar mediante el método .getSelection() de Javascript. Así que solo tendremos que ejecutar este método y volcarlo sobre la pantalla.

$("#texto").select(function(){
  selectedText = document.getSelection();
  $("#resultado").html("Se ha seleccionado el texto " + selectedText);
});

Para volcarlo en pantalla utilizamos el método .html() sobre una capa.

jQuery nos ayuda de una forma muy sencilla a realizar operaciones con el DOM de la página. De esta forma nos facilita el acceder a un campo de formulario.

Lo primero será montar nuestro formulario en HTML. Algo muy sencillo si conoces el uso de la etiqueta FORM:

 
<form id="formulario">
<input id="valor" type="text" size="50">
<button id="comprobar">Comprobar valor</button>
</form>
 

El siguiente paso será montar nuestro código jQuery. Siguiendo los principios básicos veremos que el acceso a un ID del documento se consigue mediante la función:

$("#idelemento");

Para el caso de acceder a un campo de formulario es exactamente igual. Es decir, en este caso, si queremos recuperar el id "valor", escribiremos:

$("#valor");

Si bien, esto nos da acceso al elemento, no a su contenido. Para poder acceder al contenido del campo de formulario deberemos apoyarnos en la función .val().

Así, el código para acceder a un campo de formulario con jQuery nos quedará de la siguiente forma:

$(document).ready(function(){
        $("#comprobar").click(function() {
                var x = $("#valor").val();
                alert(x);
        });
});

Si revisamos el código, veremos que para acceder al campo lo hacemos desde la función click(), la cual se invoca cada vez que hacemos click sobre el botón "comprobar".

Como podemos ver, es muy sencillo acceder a un campo de formulario con jQuery.

Si tenemos una serie de elementos en un array es muy probable que queramos volcar el contenido en pantalla. Vamos a ver cómo podemos hacer esta sencilla operación y volcar el contenido de un array con jQuery.

El punto de partida... nuestro array:

// Un listado de números. Soy poco original
var a=[1,2,3,4,5,6,7,8,9,10];

Lo primero que tenemos que tener es una parte de nuestra página web (de nuestro DOM) preparado para volcar el contenido. En nuestro caso hemos definido un elemento span.

<span id="resultado"></span>

A este elemento le hemos dado el id "resultado". Y es que el id es importante, ya que vía el id volcaremos el contenido del array. Para acceder al contenido del elemento "resultado" nos vamos a servir del método .text(). En jQuery el método .text() nos permite obtener el texto del elemento y todos los elementos que contenga.

$("#resultado").text();

Ahora solo nos queda volcar el contenido sobre el texto. Para ello nos vamos a valer de un método Javascript, del método .join(), el cual nos permite volcar el contenido de un array indicando como parámetro el separador de los elementos a volcar.

$("#resultado").text(a.join(", "));

Y con esto ya hemos conseguido volcar el contenido de un array con jQuery sobre un elemento de nuestra página.

Cuando creamos combos en un formulario nos puede aparecer la necesidad de detectar cuándo el usuario ha cambiado un valor del combo y saber que valor se ha seleccionado. Lo que en HTML viene a ser el evento onChange.

Pero, lo primero, creemos el formulario con el combo:

 
<form id="formulario">
<select id="combo">
<option value="FC. Barcelona">FC. Barcelona</option>
<option value="Real Madrid">Real Madrid</option>
<option value="Atlético Madrid">Atlético Madrid</option>
<option value="Betis">Betis</option>
<option value="Villareal">Villareal</option>
<option value="Real Sociedad">Real Sociedad</option>
</select>
</form>
 

Ahora vamos a inyectar el código jQuery para el control de cambios en el combo de forma no intrusiva. Para ello creamos código jQuery en la cabecera de la página.

El método jQuery que nos permite controlar los cambios en un combo es .change(). Aplicaremos el método .change() sobre el elemento que representa al combo (el del id "combo")

$("#combo").change(...);

En el manejador que asignamos al evento change buscaremos el nuevo valor que tenga el combo. Para ello nos vamos a valer de selectores. En concreto del "option:selected".

"#combo option:selected"

Si bien, para obtener el valor del elemento utilizamos la función .val().

Ya solo nos queda mostrar el nuevo valor del elemento tras los cambios en el combo. Por ejemplo, volvaremos dicho valor en una capa ayudándonos del método .html()

El código jQuery final nos quedará de la siguiente forma:

<script type="text/javascript">
$(document).ready(function(){
        $("#combo").change(function(){
                var op = $("#combo option:selected").val();
                $('#capa').html(op);
        });
});
</script>

O como nos comenta Unai:

<script type="text/javascript">
$(document).ready(function(){
        $("#combo").change(function(){
                var op = $(this).find("option:selected").val();
                $('#capa').html(op);
        });
});
</script>

En el anterior artículo veíamos como podemos filtrar los elementos de un array con jQuery para quedarnos los que realmente nos interesan.

En este caso filtrábamos elementos numéricos. Pero ahora vamos a ver cómo podemos filtrar elementos nulos de un array con jQuery. Lo primero será tener un array con elementos nulos.

var a=[1,2,0,"a",null,NaN,undefined,7,"","palabra",{}];

Vemos que en el array están presentes elementos como null, NanN, undefined y el cero. Todos ellos elementos nulos.

Para filtrar los elementos volvemos a apoyarnos en la función .grep(), la cual recibía el array con los elementos y la función de filtro. Pero, ¿qué función jQuery nos filtra los elementos nulos de un array?

Pues en ese caso vamos a utilizar el constructor de Boolean. Y es que cuando intentamos instanciar el constructor de Boolean con un elemento nulo, dicho constructor nos devolverá false.

Boolean(NaN); //false
Boolean(undefined); //false
Boolean(null); //false
Boolean(1); //true

El código para filtrar elementos nulos de un array con jQuery utilizando .grep() nos quedará de la siguiente forma:

var b = a.filter(Boolean);

Ya solo nos queda volcar el contenido del array.

$("#resultado").text(b.join(", "));

jQuery nos permite, de una forma muy sencilla, filtrar elementos de un array. Para ello contamos, en jQuery, con la función .grep().

Lo primero será crear nuestro array. Vamos a crear un array de números. Números del 1 al 10:

var a=[1,2,3,4,5,6,7,8,9,10];

El filtro nos ayudará a filtrar aquellos elementos que sean mayores de 5. Las función del filtros en jQuery, y que luego utilizaremos con el método .grep(), siempre recibe dos parámetros.

functionfiltro (elemento,indice) {...}

• elemento, que será el elemento del array sobre el que estemos iterando.
• indice, que será el índice del array que ocupa el elemento sujeto a análisis

Esta función devolverá true cuándo cumpla la condición que queramos aplicar y false cuándo no la cumpla.

Nuestra función de elementos mayores que 5 quedaría de la siguiente forma:

function mayorQueCinco(elemento,indice){
	return (elemento <= 5);
}

Ahora aplicamos esta función sobre el array con el método .grep(). Hay que tener en cuenta que la función .grep() nos devuelve otro array con los elementos que cumplan el filtro. Nosotros vamos a reutilizar la variable.

var a=[1,2,3,4,5,6,7,8,9,10];
a = jQuery.grep(a,mayorQueCinco);

Ya solo nos quedará volcar el contenido del nuevo array:

$("#resultado").text(a.join(", "));