JAVASCRIPT

JavaScript Events

In our last article we left off with a glimpse of JavaScript Events. In this tutorial we are going to go through each one and learn how to use them to create more dynamic web sites. So slap on your seat belts and get your helmets ready. This is gonna be an action-packed episode.

Author Info:

By: James Payne

Poor Best

Rating:

/ 20

November 26, 2007

TABLE OF CONTENTS:

When an object loses focus, it becomes blurred. OnBlur triggers when this happens. Let’s say you have someone filling out a form and you want everything to look uniform. I know when I fill out a form I leave everything lowercase. Maybe though, it is easier for you if everything is uppercase. We can use the OnBlur function to change any text a user puts into the form into uppercase as soon as the text box loses focus. Here is the code:

<html>

<head>

function upperCase()

{

var x=document.getElementById("firstname").value

document.getElementById("firstname").value=x.toUpperCase()

}

function uCase()

{

var x=document.getElementById("lastname").value

document.getElementById("lastname").value=x.toUpperCase()

}

</script>

</head>

<body>

First Name: <input type="text" id="firstname" onblur="upperCase()"><br />

Last Name: <input type="text" id="lastname" onblur="uCase()"><br />

</body>

</html>

The above code creates two input boxes: one for the first name, another for the last name. When the user inputs text into one of the text boxes and moves on to the next (or when either text box loses focus), whatever text is in the text box becomes capitalized. The submit button in this instance doesn’t do anything but sit there looking pretty.

Supporting HTML tags: <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supporting Javascript Objects: button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window

Next: OnChange >>