Saltar la navegación

2.1.- Objeto input de tipo texto.

Candado sobre un folio.
Everaldo Coelho (GNU/GPL)


Cada uno de los 4 elementos de tipo texto de los formularios: text, password, hidden y elementos textarea, son un elemento dentro de la jerarquía de objetos. Todos los elementos, excepto los tipos hidden, se mostrarán en la página, permitiendo a los usuarios introducir texto y seleccionar opciones.

Para poder usar estos objetos dentro de nuestros scripts de JavaScript, simplemente será suficiente con asignar un atributo id, a cada uno de los elementos. Te recomiendo que asignes a cada objeto de tu formulario un atributo id único y que coincida con el name de ese objeto.

Cuando se envían los datos de un formulario a un programa en el lado del servidor, lo que en realidad se envía son los atributos name, junto con los valores (contenido del atributo value) de cada elemento. Sin lugar a dudas, la propiedad más utilizada en un elemento de tipo texto es por lo tanto value. Un script podrá recuperar y ajustar el contenido de la propiedad value en cualquier momento. Por cierto, el contenido de un value es siempre una cadena de texto, y quizás puedas necesitar realizar conversiones numéricas si quieres realizar operaciones matemáticas con esos textos.

En este tipo de objetos, los gestores de eventos (que verás más adelante) se podrán disparar de múltiples formas: por ejemplo, cuando pongamos el foco en un campo (situar el cursor dentro de ese campo) o modifiquemos el texto (al introducir el texto y salir del campo).

Ejemplo de acceso al valor del campo de texto

<!DOCTYPE  html>
<html>
    <head>
        <meta  http-equiv="content-type"  content="text/html;charset=utf-8">
        <title>DWEC05 - Propiedad VALUE de un objeto de tipo texto</title>
        <script  type="text/javascript">
            const convertirMayusculas = () => {

                /*
                    En este ejemplo accedemos a la propiedad value de un objeto con id nombre y le asignamos 
                    su contenido actual pero convertido a mayúsculas con el método toUpperCase() del objeto String.
                */
                document.getElementById("nombre").value=document.getElementById("nombre").value.toUpperCase();
            }
        </script>
    </head>
    <body>
        <h1>Propiedad VALUE de un objeto INPUT de tipo TEXT</h1>
        <form id="formulario" action="pagina.php">
            <p>
                <label for="nombre">Nombre y Apellidos: </label>
                <input  type="text"  id="nombre"  name="nombre"  value="" size="30" onblur="convertirMayusculas()">
            </p>
            <p>
                Introduce tu Nombre y Apellidos y haz click fuera del campo.
            </p>
        </form>
    </body>
</html>
Propiedades del objeto INPUT de tipo texto
Propiedad Descripción W3C
defaultValue Ajusta o devuelve el valor por defecto de un campo de texto. Sí
form Devuelve la referencia al formulario que contiene ese campo de texto. Sí
maxLength Devuelve o ajusta la longitud máxima de caracteres permitidos en el campo de tipo texto Sí
name Ajusta o devuelve el valor del atributo name de un campo de texto. Sí
readOnly Ajusta o devuelve si un campo es de sólo lectura, o no. Sí
size Ajusta o devuelve el ancho de un campo de texto (en caracteres). Sí
type Devuelve el tipo de un campo de texto. Sí
value Ajusta o devuelve el contenido del atributo value de un campo de texto. Sí
Métodos del objeto INPUT de tipo texto
Metodo Descripción W3C
select() Selecciona el contenido de un campo de texto. Sí

Además de los métodos anteriores, los campos de tipo texto también soportan todas las propiedades estándar, métodos y eventos.

En términos de programación indicamos que un evento se dispara o es disparado, cuando ese evento es ejecutado o es lanzado. Por lo tanto lo podemos traducir por ejecutar o lanzar.