Linea de Codigo

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(", "));

Si hemos presentado un formulario a nuestros usuarios es probable que queramos validar la información que hayan insertado antes de enviarlo. En esta situación, si encontramos algo que no nos cuadre deberemos poder bloquear el envío del formulario.

Ahora vamos a ver cómo podemos bloquear el envío de un formulario con jQuery. Pero lo primero será poner nuestro formulario HTML. Para ello utilizamos la etiqueta FORM:

 
<form id="formulario" action="post.php">
  <label for="valor">Inserta un valor: </label>
<input id="valor" type="text" size="10">
<input type="submit" value="Enviar"/>
</form>
 

En este caso el envío del formulario se ejecuta al pulsar sobre el elemento INPUT de tipo submit.

Lo que nosotros vamos a hacer es interceptar con jQuery el evento .submit() del formulario. Para ello nos posicionamos en el formulario y capturamos dicho evento:

$("#formulario").submit(function() {...});

Ahora ya tenemos el control del envío del formulario. La idea es asignar una función que atienda a este evento .submit(). Si queremos bloquear el envío del formulario la función deberá devolver false. Si queremos que se envíe el formulario deberemos de devolver true.

Para demostrar el funcionamiento vamos a comprobar que el texto introducido coincide con una palabra. Si no coincide bloqueamos el envío del formulario (con el false) y si coincide, enviamos el formulario (con el true).

$(document).ready(function(){
  $("#formulario").submit(function() {
    var x = $("#valor").val();
      if (x!="enviar") {
        alert("Valor introducido no válido");
        return false;
      } else
          return true;
    });
});

Ya tenemos el código de cómo bloquear el envío de un formulario con jQuery.

Cuando creamos un formulario podemos asignarle valores por defecto a sus campos. Pero si no queremos que estos valores estén asociados directamente a nuestra estructura de la página, podemos utilizar jQuery para modificar los valores por defecto de un formulario y asociar los que nos interesen.

Lo primero el formulario:

 
<form id="myform">
  <label for="nombre">Nombre: </label>
<input id="nombre" type="text" size="20"/><br/>
  <label for="apellidos">Apellidos: </label>
<input id="apellidos" type="text" size="20"/><br/>
  <label for="ciudad">Ciudad: </label>
<input id="ciudad" type="text" size="20"/><br/>
  <label for="email">Email: </label>
<input id="email" type="text" size="20"/>
</form>
 

Vemos que no hay valores por defecto, para tener una estructura limpia.

El código jQuery irá a buscar los elementos input, que tengan un atributo type con valor "text".

De esta forma el selector a utilizar es el siguiente:

$("input[type='text']")

Ahora solo nos queda modificar el valor de estos campos, insertando el texto que más nos guste. Para ello utilizaremos el método .val():

$("input[type='text']")
  .val('Inserta un valor');