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.

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();
});

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');

Una de las cosas nuevas que nos trae HTML5 es la capacidad de crear marcadores de posición o más conocidos dentro de la especificación HTML5 como placeholder.

Pero, ¿qué es un placeholder o marcador de posición? Para resumirlo podemos decir que es el texto que aparece dentro de un campo de texto antes de que se inserte un contenido. De esta manera podemos indicar al usuario qué queremos que inserte en ese campo. Es algo parecido a los labels, pero dentro de propio recuadro de texto.

La utilización de placeholder no exime el uso de labels. La W3C recomienda siempre el uso de un label junto con los inputs. Aunque estemos utilizando un placeholder.

Pero vamos a ponernos manos a la obra. Lo primero será crear un input de tipo text.

 
<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" />
</form>
 

Para crear el placeholder simplemente tenemos que utilizar el atributo placeholder del elemento input. El valor que asignemos al atributo será el que aparezca en el marcado de posición.

Veamos como sería el código:

 
<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" placeholder="Inserte su nombre" size="80" />
</form>
 

Y cual sería el resultado...

Aunque lo mejor es que cargues tu mismo la página web.

Hay que tener en cuenta una cosa, y es que el placeholder es un atributo de HTML5 y que solo está soportado por los últimos navegadores web. Así que no podremos tomarlo como algo obligatorio, si no opcional al usuario que entre con un navegador de última generación.

Cuando estamos diseñando una aplicación de ventanas mediante Swing con Java, uno de los componentes que seguro que nos aparece es el JTextField. Y es que el componente JTextField nos sirve para crear un input de datos en Java.

Lo primero que tenemos que hacer es crear un JFrame, el cual va a contener nuestro JTextField.

public class CrearJTextField extends JFrame {...}

Será en el constructor de la clase Java, en dónde definamos y añadamos al formulario nuestro componente JTextField.

El componente JTextField tiene un constructor que puede recibir dos parámetros. Por un lado el texto por defecto, por otro el número de caracteres que queremos que tenga dicho campo de entrada.

JTextField input = new JTextField("texto por defecto",20);

Ya solo nos quedará añadir el componente al contenedor para que se vea en el formulario. Tarea que llevaremos acabo mediante el método .add().

Veamos como quedaría el código Java del constructor:

CrearJTextField(){
  super("Crear un JTextField");
  JTextField input = new JTextField("texto por defecto",20);
  add(input);
}

En siguientes ejemplos de Java veremos como interactuar con este componente JTextField.

Vamos a crear un código en PHP que nos permita recuperar los datos introducidos en un formulario y nos los muestre en pantalla.

El primer paso será el crear el formulario HTML que nos permita captar los datos del usuario. Este formulario tendrá dos campos de texto y un botón que nos permita enviarlo.

 
<form id="myform" action="recibir-parametros.php" method="GET">
<label for="p1">Primer parametro</label>
<input type="text" id="p1" name="p1"><br/>
<label for="p2">Segundo parametro</label>
<input type="text" id="p2" name="p2"><br/>
<input type="submit" value="Enviar Formulario"/>
</form>
 

En este punto es muy importante el valor de los atributos name, ya que serán los valores que demos a estos atributos, los que nos sirvan para recuperar lo que el usuario introduzca. En nuestro caso hemos datos los valores de p1 y p2. Que serán los que recuperemos.

Un segundo punto en el que tenemos que prestar atención es en atributo action. En dicho atributo tenemos que indicar el nombre del fichero PHP que procesará y recuperará los datos del formulario. El fichero que codificaremos más adelante se llamará recibir-parametros.php

El último punto importante del formulario será el tipo de envío de los parámetros. El tipo de envío se especifica mediante el atributo method y sus valores pueden ser POST o GET. Con POST los parámetros se pasan de forma oculta, mientras que con GET podemos ver los valores en la URL de petición. Dependiendo del método de envío que utilicemos necesitaremos utilizar un método u otro en nuestro código PHP.

Pasemos ya a codificar el fichero PHP. Este será sencillo. El método para recuperar datos de un formulario, cuando estamos pasando los parámetros mediante el método GET, es $_GET[]. El nombre del dato a recuperar se pasará como parámetro.

$_GET["p1"];
$_GET["p2"];

Ahora solo nos quedará el mostrarlo por pantalla. Para ello utilizamos la sentencia echo de la siguiente forma:

echo "El valor de p1 es ",  $_GET["p1"], "<br/>";
 echo "El valor de p2 es ",  $_GET["p2"];

Agrupando elementos INPUT de tipo radio podemos crear un grupo de opciones, en las cuales el usuario solo pueda elegir una de ellas.

Esto se consigue asignando un único nombre (atributo name) a todos los elementos input radio. Así, podríamos construir un formulario para preguntar por el sexo del usuario:

 
<form id="myform">
<input type="radio" name="sexo" id="sexo_m"/ value="masculino">
<label for="sexo_m">Masculino</label><br/>
<input type="radio" name="sexo" id="sexo_f"/ value="femenino">
<label for="sexo_f">Femenino</label><br/>
</form>
 

Si tenemos valores sobre la información del usuario. Por ejemplo, si está modificando su información anterior, podemos tener la necesidad de cambiar el valor dinámicamente. En este caso, y de no poder crear el formulario de forma dinámica, podemos utilizar JavaScript para cambiar el valor de forma dinámica.

Para cambiar el valor utilizaremos, en primer lugar, la función .getElementById() para acceder al elemento INPUT del formulario. Es por ello que es muy importante el haberle dado un valor al atributo ID.

Cuando accedemos al elemento INPUT vemos que el atributo checked es el que nos informa si el elemento está chequeado o no.

 
document.getElementById('sexo_m').checked = true;
 

Los valores que puede tomar el atributo checked son true y false. Con la línea de código anterior lo que estamos haciendo es marcar el campo 'sexo_m' como activo.

Este ejercicio consiste en comprobar, de una forma sencilla, que la contraseña introducida en un formulario, dentro de dos campos distintos, cumple una serie de restricciones:

• Ambas contraseñas deberán de coincidir.
• No se podrá dejar ningún campo de los dos vacíos.
• La cadena no podrá contener espacios en blanco .

Lo primero que haremos a la hora de crear el formulario será indicar que los campos de entrada deben de ser INPUT del tipo password

<label for="passwd">Introduzca la contraseña:</label>
<input type="password" id="passwd" size="20">

Con lo que respecta a la validación, se debe de hacer en cuanto el usuario quiera enviar el formulario. Es decir, deberemos de detectar el evento onSubmit. Dentro de este evento ejecutaremos la función de validación, dicha función retornará verdadero si se cumplen todos los requisitos, sino se retornará falso.

 
<form name="form1" method="POST" onSubmit="return validarPasswd()" action="enviar.php">

Ahora empezaremos a codificar la función Javascript que realice la validación. En este caso es la función "validarPasswd", la cual llamamos desde el onSubmit.

Hay que decir que tenemos diferentes formas de realizar esta validación. La más rápida sería con el uso de patrones. Pero en nuestro caso y orientándolo a un desarrollo muy básico vamos a realizarlo con estructuras básicas del lenguaje.

Para acceder al valor de los campos vamos a utilizar la función .getElementById. Esta función recibe como parámetro el ID que le hayamos dado a los campos INPUT del formulario. Es por ello que deberemos de revisar el valor de los atributos ID.

var p1 = document.getElementById("passwd").value;
var p2 = document.getElementById("passwd2").value;

Ahora pasaremos a realizar las diferentes validaciones

Que no haya espacios en blanco

Recorremos la cadena mediante un bucle iterativo y con una variable de guarda. En el caso de que encontremos un carácter en blanco, cambiamos el valor de la variable de guarda.

var espacios = false;
var cont = 0;
 
while (!espacios && (cont < p1.length)) {
  if (p1.charAt(cont) == " ")
    espacios = true;
  cont++;
}
 
if (espacios) {
  alert ("La contraseña no puede contener espacios en blanco");
  return false;
}

Que no nos hayan dejado un campo vacío

Para ello comprobaremos que el tamaño es mayor de 0. El tamaño de una cadena lo conseguimos con el atributo .length

if (p1.length == 0 || p2.length == 0) {
  alert("Los campos de la password no pueden quedar vacios");
  return false;
}

Que ambas contraseñas coincidan

En este caso comprobaremos que el contenido de las variables es el mismo:

if (p1 != p2) {
  alert("Las passwords deben de coincidir");
  return false;
} else {
  alert("Todo esta correcto");
  return true;
}

Ahora, ¿Te atreves a realizarlo con patrones?

Cuando ofrecemos un área de texto puede darse el caso que tengamos un límite de los caracteres a ser introducidos. En este caso sería bueno el irle ofreciendo al usuario el número de caracteres que se han insertado, y de paso las palabras.

Lo primero que vamos a hacer es crear un área de texto en HTML mediante el elemento TEXTAREA.

<FORM ID="formulario" ACTION="#">
<TEXTAREA ID="area" COLS=20 ROWS=10>
Texto dentro del área de texto </TEXTAREA><BR>
<INPUT TYPE="button" VALUE="Contar las palabras" onClick="wordCount();">
</FORM>

Dentro del formulario incluimos un botón, que al ser pulsado invocará al método wordCount(), el cual contiene todo el código del ejemplo para contar caracteres y palabras en JavaScript.

Dentro del método wordCount lo primero será obtener el texto del área de texto (valga la redundancia). Esto lo haremos mediante el método getElementById

textoArea = document.getElementById("area").value;

Una vez que tenemos el texto el número de caracteres lo obtenemos mediante la longitud del mismo (propiedad length).

umeroCaracteres = texto.length;

Lo siguiente es contar las palabras que tiene dicho texto. Para poder hacer esto utilizaremos la función split la cual TROCEA una cadena en subcadenas tomando como carácter de corte el que le pasemos como parámetro, y dejándonos el resultado en un array de palabras.

textoAreaDividido = textoArea.split(" ");
numeroPalabras = textoAreaDividido.length;

Lo más normal es pensar que contando la longitud del array de palabras tendremos la solución. Pero existen algunos casos que debemos de considerar:

1. Que exista un blanco al principio del texto.
2. Que exista un blanco al final del texto.
3. Que existan varios blancos seguidos.

En los dos primeros casos lo que tendremos que hacer es eliminar los espacios en blanco y en el tercer caso deberemos de reducir los X blancos en uno solo. Las cosas serian más fáciles si contásemos con funciones del estilo trim, ltrim o rtrim. Pero en JavaScript no es el caso.

Para solucionar esto deberemos de recurrir a las expresiones regulares y a la función replace. Deberemos de crear expresiones regulares que simulen las excepciones y aplicar un replace (por nada en el primer y segundo caso y por un espacio en el tercer caso).

Las expresiones regulares que simulan las excepciones son:

primerBlanco = /^ /
ultimoBlanco = / $/
variosBlancos = /[ ]+/g

Una vez aplicadas las excepciones al texto haremos el split y contaremos la longitud.

texto = texto.replace (variosBlancos," ");
texto = texto.replace (primerBlanco,"");
texto = texto.replace (ultimoBlanco,"");
textoTroceado = texto.split (texto, " ");
numeroPalabras = textoTroceado.length;

Actualización 20.junio.09:
El orden de ejecución para la eliminación de blancos será variosBlancos, primerBlanco y ultimoBlanco. Ya que si ejecutamos variosBlancos al final podemos tener un inicio o fin de cadena con varios espacios en blanco que no controlemos.

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del código