Control de campos de texto con Javascript

  • Por
Explicación y documentación de los campos de texto y su control con Javascript. Se incluyen los campos de tipo text, password y hidden.
Vamos a ver ahora los campos donde podemos guardar cadenas de texto, es decir, los campos de texto, password y hidden. Hay otro campo relacionado con la escritura de texto, el campo TextArea, que veremos más adelante.

Campo Text

Es el campo que resulta de escribir la etiqueta <INPUT type="text">. Lo hemos utilizado hasta el momento en varios ejemplos, pero vamos a parar un momento en él para describir sus propiedades y métodos.

Propiedades del campo text

Vemos la lista de propiedades de estos tipos de campo.

defaultValue
Es el valor por defecto que tiene un campo. Lo que contiene el atributo VALUE de la etiqueta <INPUT>.

form
Hace referencia al formulario.

name
Contiene el nombre de este campo de formulario

type
Contiene el tipo de campo de formulario que es.

value
El texto que hay escrito en el campo.

Vamos a ver un ejemplo sobre lo que puede hacer la propiedad defaultValue. En este ejemplo tenemos un formulario y un botón de reset. Si pulsamos el botón de reset el campo de texto se vacía porque su value de HTML era un string vacío. Pero si pulsamos el botón siguiente llamamos a una función que cambia el valor por defecto de ese campo de texto, de modo que al pulsar el botón de reset mostrará el nuevo valor por defecto.

Este es el código de la página completa.

<html>
<head>
   <title>Cambiar el valor por defecto</title>
   <script>
    function cambiaDefecto(){
       document.miFormulario.campo1.defaultValue = "Hola!!"
    }
   </script>
</head>

<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="Reset">
<br>
<br>
<input type="button" value="Cambia valor por defecto" onclick="cambiaDefecto()">
</form>
</body>
</html>

Se puede ver en funcionamiento en esta página.

Métodos del objeto Text

Se pueden invocar los siguientes métodos sobre los objetos tipo Text.

blur()
Retira el foco de la aplicación del campo de texto.

focus()
Pone el foco de la aplicación en el campo de texto.

select()
Selecciona el texto del campo.

Como ejemplo vamos a mostrar una función que selecciona el texto de un campo de texto de un formulario como el de la página del ejemplo anterior. Para hacerlo hemos utilizado dos métodos, el primero para pasar el foco de la aplicación al campo de texto y el segundo para seleccionar el texto.

function seleccionaFoco(){
    document.miFormulario.campo1.focus()
    document.miFormulario.campo1.select()
}

Puede verse en funcionamiento en esta página.

Campos Password

Estos funcionan igual que los hidden, con la peculiaridad que el contenido del campo no puede verse escrito en el campo, por lo que salen asteríscos en lugar del texto.

Campos Hidden

Los campos hidden son como campos de texto que están ocultos para el usuario, es decir, que no se ven en la página. Son muy útiles en el desarrollo de webs para pasar variables en los formularios a las que no debe tener acceso el usuario.

Se colocan en con HTML con la etiqueta <INPUT type=hidden> y se rellenan de datos con su atributo value. Mas tarde podremos cambiar el dato que figura en el campo accediendo a la propiedad value del campo de texto igual que lo hemos hecho antes.

document.miFormulario.CampoHidden.value = "nuevo texto"

El campo hidden sólo tiene algunas de las propiedades de los campos de texto. En concreto tiene la propiedad value y las propiedades que son comunes de todos los campos de formulario: name, from y type, que ya se describieron para los campos de texto.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Luis egas

23/10/2005
document.miFormulario.CampoHidden.value = "nuevo texto"
Me pareces o es que le falta un punto "." despues de Campo
document.miFormulario.Campo.Hidden.value = "nuevo texto"

angarzafir

30/1/2007
quisiera saber si puedo copia este articulo a un foro dejando la referencia de que fue obtenido de esta pagina y citando el autor??/ o su poilitica no lo permite?? muchisimas gracias!

Muy bueno el articulo, por eso me gustaria tenerlo en el foro...

ROY HESS

09/8/2007
Muy Bueno

Serpi

24/1/2008
Luis, me parece que te equivocas, campoHidden es el nombre del objeto (delcampo hidden).
La cadena:
document.formulario.nombreCampo.propiedad

es la manera en la que accedes a la propiedad del objeto, es como un arbol. donde el padre de todos los objetos de la pagina es el document, dentro de el el formulario, y dentro del formulario el objeto (en este caso el hidden que se llama campoHidden).
Luego accede a su propiedad value para asiganrle un nuevo valor.

A ver si me explico mejor, el campohidden no tiene una propiedad que se llama hidden y que ahi metes tu el valor que quieras.

campo.hidden.value="valorquequieras" //esto no
si no que el campo tiene un value independiemtemente decomo sea (hidden o no hidden).

Alexis Advance

15/6/2010
Acerca de los campos de tipo «pasword»
En la descripción de los campos de tipo «pasword» dice:

«Estos funcionan igual que los hidden...»

Me parece que eso es un error, pues debe decir que funcionan igual que los campos TEXT, con las diferencias que más adelante describe.

¡Saludos!

Cristián

19/9/2011
MUY BUENO
Muy simple y muy bueno, me ayudó un montón para hacer un boton que intercambia el contenido de dos campos de texto de un <form> MIL GRACIAS!

Compartir