JavaScript Events - OnBlur
(Page 2 of 5 )
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>
<script type="text/javascript">
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 />
<input type="submit" value="Submit Info" id="sub">
</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 >>
More JavaScript Articles
More By James Payne
/ 8 
