JavaScript Events: OnError, OnFocus and More - OnKeyUp
(Page 6 of 6 )
The OnKeyUp even triggers when a key on the keyboard is released. In the next sample of code we are going to convert all of our text to Uppercase and change the background color of the text box to green.
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
document.getElementById(x).style.background="green"
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onkeyup="upperCase(this.id)">
</body>
</html>
Pretty nifty right? But what if we really wanted to annoy someone? Let's make a script to do just that.
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
document.getElementById(x).style.background="green"
alert ('You entered some text!')
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onkeyup="upperCase(this.id)">
</body>
</html>
The above code will not only capitalize every character entered and change the background to green, it will also create a pop-up box for every letter you enter. If you want a lot of repeat traffic coming to your site, I highly recommend that you add this annoying piece of JavaScript. And if you believe that, I have some beautiful waterfront property to sell you in the Everglades.
Supporting HTML tags: <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <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: document, image, link, textarea
Well, we covered a lot of ground in this tutorial. Be sure to check out the next installment where we will continue to discuss the various JavaScript events.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 8 
