Cuadros de Texto en JavaScript
Los cuadros de texto son unos espacios en la página web donde podemos introducir texto, números o cualquier caracter.
Para crearlos se hace como los botones, desde la página web en html. La instrucción es (escríbela en tu archivo html):
Ves que es como un botón pero en type ponemos text para especificar que es un cuadro de texto. Value es para poner un texto inicial dentro del cuadro si queremos, en este caso vacío.
Lógicamente podremos escribir pero no hace nada más. Tendríamos que decirle qué hacer con lo que el usuario introduce en el texto. Para recoger el texto de un cuadro necesitamos meter en contenido del cuadro dentro de una variable de la siguiente forma:
Veamos las partes de la nueva instrucción:
Ahora que ya sabemos cómo recoger lo que hay dentro de un cuadro de texto solo nos queda qué hacer con lo recogido. Recuerda que lo recogemos dentro de una variable, por lo tanto especificaremos qué hacer con la variable, en nuestro caso, qué hacer con contenidoCuadro.
Vamos hacer un ejemplo. Queremos crear un programa que podamos escribir dentro de un cuadro de texto y cuando pulsemos un botón se escriba en la página lo mismo que hay dentro del cuadro de texto. Borra todo lo que tengas en los archivos javascript.js y web.html.
En el archivo javascript.js escribe:
En el web.html escribe:
Ábrelo, escribe dentro del cuadro de texto y después pulsa el botón.
Tutorial de JavaScript (XV)
Los cuadros de texto son unos espacios en la página web donde podemos introducir texto, números o cualquier caracter.
Para crearlos se hace como los botones, desde la página web en html. La instrucción es (escríbela en tu archivo html):
<input type="text" size="10" name="pepe" value=""> Ves que es como un botón pero en type ponemos text para especificar que es un cuadro de texto. Value es para poner un texto inicial dentro del cuadro si queremos, en este caso vacío.
Lógicamente podremos escribir pero no hace nada más. Tendríamos que decirle qué hacer con lo que el usuario introduce en el texto. Para recoger el texto de un cuadro necesitamos meter en contenido del cuadro dentro de una variable de la siguiente forma:
var contenidoCuadro = document.getElementsByName('pepe')[0].value;Veamos las partes de la nueva instrucción:
- document es para decirle que queremos recoger algo que está dentro del documento html.
- getElementsByName es para decirle que el elemento a recoger lo recogeremos por su nombre que lo identifica (recuerda que en los cuadros y botones los identificamos por su name). En nuestro caso el nombre del elemento que queremos recoger es pepe.
- [0] La mayoría de las veces en un documento html hay varios elementos con el mismo nombre, es por eso que tenemos que decirle de todos los que existen el lugar que ocupa el que nosotros queremos recoger. Imagina que hay 3 elementos que se llaman pepe, si ponemos [0] le decimos que queremos recoger lo que hay dentro del primer elemento pepe que encuentre. Si ponemos [1] será el segundo y así sucesivamente.
- value significa que queremos recoger el valor que tenga en ese momento ese elemento. En el caso de un cuadro de texto el valor que tiene será lo escrito dentro de él en ese momento.
Ahora que ya sabemos cómo recoger lo que hay dentro de un cuadro de texto solo nos queda qué hacer con lo recogido. Recuerda que lo recogemos dentro de una variable, por lo tanto especificaremos qué hacer con la variable, en nuestro caso, qué hacer con contenidoCuadro.
Vamos hacer un ejemplo. Queremos crear un programa que podamos escribir dentro de un cuadro de texto y cuando pulsemos un botón se escriba en la página lo mismo que hay dentro del cuadro de texto. Borra todo lo que tengas en los archivos javascript.js y web.html.
En el archivo javascript.js escribe:
function escribe(){
var rellena = document.getElementsByName('cuadro1')[0].value;
document.write(rellena);
}En el web.html escribe:
<html>
<head>
<title>Cuadro de Texto</title>
http://nuestrojavascript.js
</head>
<body>
Hola ¿Como te llamas? <input type="text" size="10" name="cuadro1" value=""><br /><br />
<input type="button" value="Pulsa Aqui" name="escribirTexto" onclick="escribe()" />
</body>
</html>Ábrelo, escribe dentro del cuadro de texto y después pulsa el botón.
Tutorial de JavaScript (XV)
[…] Tutorial de JavaScript (XIV) […]
ResponderEliminar[…] Tutorial de JavaScript (XIV) […]
ResponderEliminar