Eventos sobre campos de texto
Manejador de Formularios

 

Eventos sobre campos de texto

Los campos de texto comprenden onBlur, onFocus, y onChange. El evento onFocus ocurre cuando alguien pica dentro de un campo de texto. OnBlur ocurre cuando alguien sale de dicho campo o presiona "tab". OnChange ocurre cuando alguien modifica los contenidos de dicho campo y luego sale de él.

Ejemplo27_0.html

Trate de hacer las operaciones enunciadas en el punto anterior, en el bloque de texto verá lo que ha efectuado en cuanto a eventos se refiere.

Edite dicho ejemplo en un editor. Analice y describa el porque de los distintos comportamientos.

Cada uno de los manejadores de eventos llama a la función writeIt(), que se ha definido en el encabezado.

La línea ...

window.document.first_form.the_textarea.value += word_with_return;

... dice, "establezca el valor del área de texto a su valor actual más la nueva variable".

En la Parte B, tenemos el formulario y dos enlaces, cada uno de ellos pondré en foco y marcará todo el campo en forma respectiva.

Manejador de Formularios

 

Ejemplo28_0.html

Los formularios son objetos; tienen sus propios métodos propiedades y manejadores de eventos. Uno de los manejadores de eventos que debería conocer es onSubmit.

OnSubmit obtiene todo lo llamado en dos situaciones: si un usuario presiona sobre el botón de submit, o si un usuario presione <return> dentro de un campo de texto. Si estas acciones no son administradas en algún modo, su JavaScript puede comportarse diferente de lo esperado. En la Parte A del ejemplo28_0.html, presione el botón Enviar o si presiona <return> sobre un campo de texto.

Si estas acciones no son administradas de algún modo, su JavaScript puede comportarse diferente de lo esperado.

Bajo Netscape, presionar un botón Submit no manejado generalmente recarga la página. En general, este no será el comportamiento que espera. Para bloquear este comportamiento, necesita hacer esto:

 

I<form onSubmit="return false;">

<input type="submit" value="Submit">

</form>

 

Generalmente return false, es un modo que JavaScript impida que el navegador haga algo que de otra forma lo haría, tal como recargar una página.

En la Parte B tenemos definido un enlace, pero que también está bloqueado. La forma de hacer esto es:

<a href="http://www.webmonkey.com/"
onClick="return false;">mattmarg!</a>

 

No irá a ningún lado debido a retornar falso cuando se dispare el evento onClick.

Esto parece no tener sentido, pero puede ser algo útil en algunos caso de formularios.

En la Parte C, ingrese un nombre y presione el botón «Click Aquí».

Cuando presiona <return> en un campo de texto, se dispara el manejador onSubmit. Ejecuta la función monkeyLove(), que cambia el valor en el campo de texto.

Si el return false no estubiese en el manejador onSubmit, la función monkeyLove() se ejecutaría, pero a continuación se cargaría la página, cambiando el campo de texto a su valor inicial. Para detener este comportamiento, necesita tener "return false" dentro del manejador onSubmit.

¿Qué diferencia existen entre la parte C y D? Explique su comportamiento.

<<<Anterior - Siguiente>>>