Control de campos de texto con Javascript
Anuncio
Control de campos de texto con Javascript
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 propuedades 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 tormulario 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.
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com
