Tecnología

Inicio

Cómo cambiar la longitud de un campo de entrada para una unidad de medida

July 16

Cómo cambiar la longitud de un campo de entrada para una unidad de medida


Uno de los aspectos más interesantes de idiomas del lado del cliente como JavaScript es que permiten a los desarrolladores web a páginas de códigos que responden inmediatamente a la interacción del usuario sin necesidad de una ida y vuelta al servidor Web. En el pasado, las páginas HTML eran estáticas o ejecutada de forma remota. Si los usuarios necesitan para ingresar la información, ya sea que se vieron obligados a vivir con lo que sea atributos fueron diseñados originalmente por el desarrollador o esperar una respuesta del servidor. Mediante el uso de código dinámico, los desarrolladores web pueden cambiar las interfaces de usuario sobre la marcha en base a la entrada del usuario y ofrecer experiencias de usuario más robustas.

Instrucciones

1 Abrir un programa de edición de texto y crear un nuevo archivo llamado "changeInput.html."

2 Añadir algunas etiquetas HTML básicas para "changeInput.html". Estas etiquetas conforman una página HTML muy básico.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>

3 Añadir dos HTML "<input>" etiquetas a changeInput.html entre el archivo de "<body>" y "</ body>" etiquetas. Asignar a cada "<input>" etiquetar un "tipo" valor de atributo "Radio" y un "nombre" valor de atributo "medida". Añadir el texto "pies" para completar el primer botón y el texto "Pulgadas" para completar la segunda boton de radio:
<input type = "radio" name = "medir" los Pies>
<input type = "radio" name = "medida"> Pulgadas

4 Añadir una etiqueta HTML "<input>" etiqueta para changeInput.html después de los dos botones de radio. Asignar la etiqueta "<input>" un "tipo" "texto", un valor de atributo "tamaño" valor de atributo "1" y un "id" valor "InputField" de la siguiente manera:
<Input type = "text" size = "1" id = "InputField">

5 Colocar dos delimitadores de JavaScript ( "<script>" y "</ script>") entre changeInput.html de "<head>" y "</ head>" etiquetas. Asignar la etiqueta abierta "<script>" un valor "tipo" "text / javascript". Cualquier texto colocado entre el "<script>" y "</ script>" delimitadores será interpretado como JavaScript en el navegador Web:
<Script type = "text / javascript">
</ Script>

6 Declarar una función JavaScript denominada "changeInputLength" en changeInput.html. Coloque la función entre el JavaScript abierta ( "<script>") y cerrar ( "</ script>") las etiquetas. La función "changeInputLength" toma un argumento: la longitud a la que el campo de entrada debe cambiar cuando el usuario selecciona un botón de medición, como "pies" o "pulgadas". Coloque dos llaves después de la declaración de función para indicar que la función de ubicación de código:
changeInputLength función (longitud)
{
}

7 Utilice el método JavaScript "getElemenById" para cambiar la longitud del campo de entrada "InputField". Para cambiar la longitud del campo, establezca la "anchura" atributo de estilo al valor pasado a la función "changeInputLength" cuando el usuario selecciona uno de los campos de entrada:
. Document.getElementById ( 'InputField') style.width = longitud;

8 Modificar cada una de las etiquetas de los botones de radio y utilizar un "onclick ()" evento JavaScript para llamar a la función changeInputLength. Pasar el valor "longitud" "12" para el botón de opción de "Pies" y pasar el valor "longitud" "16" para el botón de radio "Pulgadas". Guarde y cierre changeInput.html. Después del paso 8, changeInput.html aparecerá como se muestra a continuación:
<Html>
<Head>
<Script type = "text / javascript">
changeInputLength función (longitud)
{
. Document.getElementById ( 'InputField') style.width = longitud;
}
</ Script>
</ Head>
<Body>
<Input type = "radio" name = "medida" onclick = "changeInputLength ('12 ')"> Pies
<Input type = "radio" name = "medida" onclick = "changeInputLength ('16 ')"> Pulgadas
<Input type = "text" size = "1" id = "InputField">
</ Body>
</ Html>

9 changeInput.html abierta en un navegador web habilitado JavaScript. Haga clic en cada botón de radio y verificar que los cambios de longitud del campo de entrada basados ​​en la unidad de medida.

Consejos y advertencias

  • longitudes de los campos de entrada pueden cambiarse utilizando lenguajes de script del lado del servidor como PHP o Perl. Si bien este método hace que la unidad de medida a disposición de los scripts del lado del servidor, se requiere una actualización de la página para cambiar la longitud del campo de entrada en la interfaz de usuario.
  • Casi cada atributo de estilo HTML disponible se puede cambiar dinámicamente utilizando el método de JavaScript "getElementById".
  • Muchos eventos se pueden utilizar para desencadenar cambios dinámicos de elementos de interfaz de usuario, incluyendo onBlur onLoad y onMouseOver.
  • Diferentes aplicaciones Web pueden requerir unidades alternas de medida. Las especificaciones exactas de cómo longitudes de entrada deben cambiar son la decisión del desarrollador.
  • ancho de los campos de entrada se pueden cambiar usando la propiedad CSS "ancho".
  • "Tamaño" y cambios "ancho" pueden no ser compatibles con todos los navegadores. Asegúrese de comprobar el resultado en más de un navegador Web, especialmente si los efectos del cambio otros componentes de la interfaz de usuario.