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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...