value : esta propiedad define el texto
que por defecto va a aparecer inicialmente dentro de la caja de texto. A
simple vista puede parecer que poco podemos sacar de acceder mediante
JavaScript a esta propiedad, pero un estudio más detallano nos dice que esto
no es así, y que las posibilidades de uso son muchas. Lo primero es acceder a
la propiedad, y esto se consigue mediante la escritura:
document.[nombre_formulario].[nombre_campo].value
y
?para qué podemos usar esto?. Imaginemos por ejemplo que tenemos un campo de
texto en el que inicialmente queremos introducir u texto aclaratorio
para que el usuario sepa qué tiene que introducir en el campo, pero que una
vez que pinche en el campo este texto desapareca. El código necesario para
ello
sería:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM
NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post">
Introduce tu
nombre: <INPUT TYPE=" text " NAME=" nombre " VALUE= " sólo mayúsculas
"
ONCLICK = "document.forms.datos.nombre.value= ''
">
</FORM>
</BODY>
</HTML>
y con esto le
estamos diciendo al navegador que cuando el usuario pinche en el campo el
texto inicial se sustituya por un valor vacío. Podemos ver este
ejemplo en acción.
y también podemos conseguir mediante esta propiedad pasar el valor
introducido por el usuario en un campo de texto a otro campo de otro
formulario, que puede estar en la misma ventana, en otro frame o en una
ventana flotante. Esto nos puede servir por ejemplo para hacer un formulario
resumen o para pasar valores a campos ocultos ( HIDDEN ). Un ejemplo de
código, para pasar el valor a un formulario de la mima página,
sería:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM
NAME="datos">
Introduce tu nombre:<INPUT TYPE="text"
NAME="nombre"><BR><BR>
<INPUT TYPE="button" VALUE="copiar
dato" ONCLICK="copiar()">
</FORM><BR>
<FORM
NAME="segundo">
tu nombre:<INPUT TYPE="text"
NAME="nombre">
</FORM>
</BODY>
</HTML>
que
podemos ver trabajar
en el siguiente
ejemplo.
La propiedad value lleva asímismo asociada otra propiedad general de JavaScript,
la propiedad length, que nos da la longitud del texto introducido en la caja,
es decir, el número de caracteres que el usuario ha introducido. Esta propiedad es
muy útil y se utiliza mucho, y con ella podemos por ejemplo
hacer que el foco salte de una caja a otra cuando se haya introducido en la primera
un número dado de caracteres. Vamos a ver un código que hace esto,
saltando el foco al segundo campo cuando en el primero se introducen
5 caracteres:
<html>
<head>
<script
language="JavaScript" type="text/javascript">
function comprueba(){
if(document.form1.caja1.value.length==5)
document.form1.elements[1].focus();
}
</script>
</head>
<body>
<center>
<form
name="form1">
<input type="text" name="caja1" size=10 value=""
onKeyPress="comprueba()">
<input type="text" name="caja2" size=10
value="">
<br>
</form>
</center>
</body>
</html>
cuyo resultado vemos
en el siguiente ejemplo.
disabled : esta propiedad bloquea
el campo de texto, de tal forma que el texto que contenga el campo se colorea
de color grís y no se puede escribir nada nuevo en el campo.
Vamos a
ver su sintaxis mediante un
ejemplo:
<HTML>
<HEAD>
</HEAD>
<SCRIPT
LANGUAGE = " JavaScript " >
function bloquea (
){
document.forms.form1.campo1.disabled =
true;
}
function desbloquea (
){
document.forms.form1.campo1.disabled =
false;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM
NAME = " form1" >
<INPUT TYPE = " text " NAME = " campo1 "
VALUE = " campo de texto" >
<BR><BR>
<INPUT TYPE = "
button " VALUE = " campo disabled " ONCLICK = " bloquea ( ) "
>
<INPUT TYPE = " button " VALUE = " campo enabled "
ONCLICK = " desbloquea ( ) "
que vemos en funcionamiento en el siguiente
ejemplo.
size : que
establece la anchura de la caja de texto ( ejemplo de
uso abajo, asociado al evento onKeyPress).
Los principales métodos del objeto text
son:
- focus() : que sitúa el foco en la
caja de texto. Este método se puede usar por ejemplo cuando se realiza una
validación de formulario y hay algún dato incorrecto; podemos entonces lanzar
un mensaje de alerta al usuario y situar el cursor en el campo incorrecto. El
código para ello sería:
<html>
<head>
</head>
<body>
<center>
<form
name="form0">
<input type="text"
name="caja"><br><br>
<input type="button" value="pon
foco"
onClick="document.form0.caja.focus()">
</form>
</center>
</body>
</html>
cuyo resultado podemos ver en la
siguiente ventana.
- select(): este método selecciona el
texto contenido en la caja, poniendo todo el contenido de la misma con un
fondo azul estandar. Su uso pasa por la sintaxis:
<html>
<head>
</head>
<body>
<center>
<form
name="form0">
<input type="text" name="caja" value="texto
inicial"><br><br>
<input type="button" value="pon foco"
onClick="document.form0.caja.select()">
</form>
</center>
</body>
</html>
y su efecto es visible en el siguiente ejemplo.
- toUpperCase - toLowerCase : estos
métodos propios convierten el texto introducido a mayúsculas y a minúsculas
respectivamente, y van asociados a la propiedad value de la caja de texto.
Vamos a ver el código necesario para pasar a mayúsculas en texto que el
usuario introduce en un elemento text:
<head>
<script
language="JavaScript" type="text/javascript">
function cambia(){
document.form1.caja1.value=document.form1.caja1.value.toUpperCase();
}
</script>
</head>
<body
bgcolor="#ffffcc">
<center>
<form
name="form1">
<input type="text" name="caja1" size=40 value=""
>
<br>
<input type="button" value="!a mayúsculas!"
onClick="cambia()">
</form>
</center>
</body>
</html>
que apreciamos en la siguiente ventana.
Por otra parte, el objeto TEXT posee los siguientes eventos:
- onFocus : este evento permite lanzar una acción cuando la
caja de texto recibe el foco, es decir, cuando el usuario pincha con el ratón
la caja o cuando accede a ella mediante el tabulador del teclado. Un ejemplo
de llamada al método sería:
<INPUT TYPE = " text" NAME =
" campo1 " ONFOCUS = " alert ( ' foco en la caja ' ) " >
- onBlur : mediante este evento podemos ejecutar una acción
dada cuando la caja de texto pierde el foco, bien porque el usuario trás
escribir en ella pinche en otra parte de la página o bien cuando accede a otro
campo del formulario mediante el tabulador. Su uso pasa por usar una sintaxis
del tipo:
<INPUT TYPE = " text" NAME = " campo1 " ONBLUR =
" alert ( ' foco fuera de la caja ' ) " >
Vamos a ver un
ejemplo de cómo podemos utilizar estos dos eventos. Vamos a crear un
formulario con dos cajas de texto, de tal forma que después de escribir en la
primera al pasar a la segunda cambiará el texto que hayamos introducido por
otro ( evento onBlur ), mientras que la segunda caja se escribirá sóla (
evento onFocus
):
<HTML>
<HEAD>
<SCRIPT
LANGUAGE = " JavaScript ">
function pinta1(
){
document.form1.campo1.value = " evento onFocus"
;
}
function pinta2 (
){
document.form1.campo2.value = " evento onBlur"
;
}
</SCRIPT>
</HEAD><BR><BODY>
<FORM
NAME = " form1">
<INPUT TYPE = " text " NAME = " campo1 " ONBLUR =
"pinta2 () ">
<INPUT TYPE = " text " NAME = " campo2 " ONFOCUS = "
pinta1() ">
</FORM>
</BODY>
</HTML>
Vamos
a ver cómo actúan los dos eventos anteriores mediante un
ejemplo.
- onClick : este evento es aceptado por el objeto text,
pero su efecto en este caso es el mismo que el del evento onFocus, por lo que
su uso es análogo.
- onChange : evento se lanza cuando el texto que aparece en
un campo de texto se cambia por otro diferente. Su escritura se debe parecer
a:
<INPUT TYPE = " text" NAME = " nombre" ONCHANGE = "
alert ( ' lo que sea' ) " >
y podemos verlo en acción en este ejemplo,
en el que si cambiamos el nombre que aparece por defecto en el primer cambio
recibiremos un mensaje de alerta.
- onMouseOver - onmouseOut: estos dos eventos son aceptados
por el objeto text, aunque su buen uso depende de la habilidad del
programador, ya que a veces nos puede traer problemas, por ejemplo si lo
usamos asociado a un mensaje de alerta, ya que en ese caso nunca podrá el
usuario escribir en la caja. Vamos a ver un ejemplo de uso, que además de
enseñarnos cómo se deben usar estos eventos nos va a mostrar las dificultades
que puede ocasionerle al usuario si no se usan corréctamente. Vamos a colocar
dos campos de texto; en el primero va a aparecer un mensaje indicando al
usuario que introduzca su nombre, y cuando este ponga el cursor sobre el campo
se le indicará que lo introduzca en mayúsculas. En el segundo campo aparecerá
un mensaje cuando el usuario quite el ratón del primer campo. Pero si este
vuelve a pasra el ratón por el primer campo, el texto que introdujo
desaparece. ?Cómo se arregla esto...?. Pensad un poco. El código de nuestro
ejemplo
será:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM
NAME = " form1" >
<INPUT TYPE = " text " NAME = " nombre " VALUE = "
pon aquí tu nombre "
ONMOUSEOVER = " document.form1.nombre.value = '
usasólo mayúsculas ' "
ONMOUSEOUT = " document.form1.mensaje.value = '
bonito nombre'" ><BR><BR>
<INPUT TYPE = " text " NAME=
"mensaje">
</FORM>
</BODY>
</HTML>
y
podemos ever este
ejemplo funcionando.
-
onkeyPress : este evento se produce cuando el usuario
pulsa una tecla cualquiera. Vamos a ver un ejemplo de uso, en el que vamos a
colocar una caja de texto con un ancho inicial (fijamos ek atributo size),
pero que vamos a ir modificando cuando el usuario introduzca más texto del que puede
contener. El código es:
<html>
<head>
<script
language="JavaScript" type="text/javascript">
function valora(){
var
n=document.form1.caja1.value.length;
if(n > 4)
document.form1.caja1.size=n+1;
}
</script>
</head>
<body bgcolor="#ffffcc">
<form name="form1">
introduce
un el texto que quieras:
<input
type="text" name="caja1" size="4"
onkeypress="valora()">
</form>
</body>
</html>
y su efecto lo podemos ver en este ejemplo.
Nota Importante: Los objetos hidden son
un elemento fundamental en muchos formularios, ya que permiten almacenar valores
que podemos ir pasando a estos campos y que se utilizan para definir
configuraciones del usuario o del propio formulario, todo ello de una forma
transparente para el usuario, que en ningún momento es consciente de la
existencia de estos campos ocultos. La forma de acceder a ellos y a su propiedad
value, la fundamental para esta técnica, es la msima que para acceder a un campo
de texto cualquiera.
Home - Articulos JavaScript -
Caminando entre formularios - 1 - 2 - 3
- 4 - 5 - 6 - 7 - 8
