Blinking Textbox Effect

JavaScriptSource Staff Jun 6, 2007

General

This script will place the cursor in a designated textbox, causing its background to blink a specified color for a pre-determined amount of seconds. This will highlight the textbox on the Web page in order to draw attention to it.

Name:
E-mail:

Notes

Created by: mrhoo
Web Site: http://www.webdeveloper.com/forum/showpost.php?p=761000&postcount=40
Posted: June 6, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: blinkingTextboxEffect.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: mrhoo | http://www.webdeveloper.com/forum/showpost.php?p=761000&postcount=40 */
window.Blink = function(args){
  // Set the color and seconds below, e.g., [args,'COLOR',SECONDS]
 	args = (/,/.test(args))?  args.split(/,/):  [args,'#FFD100',10];
 	var who = document.getElementById(args[0]);
 	var count = parseInt(args[2]);
 	if (--count <=0) {
  		who.style.backgroundColor = '';
  		if(who.focus) who.focus();
 	} else {
  		args[2]=count+'';
  		who.style.backgroundColor=(count%2==0)? '': args[1];
 	 	args='\"'+args.join(',')+'\"';
  		setTimeout("Blink("+args+")",500);
 	}
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  // Set the field name below of where to place the focus and blinking color
  Blink('name');
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="blinkingTextboxEffect.js"></script>

Body

Paste this code into the BODY section of your HTML document


<table>
  <tr>
    <td width="50"><b>Name:</b></td>
    <td width="300"><input id="name" type="text"></td>
  </tr><tr>
    <td width="50"><b>E-mail:</b></td>
    <td width="300"><input id="email" type="text"></td>
  </tr><tr>
    <td colspan="2" align="center">
    <input type="button" value="Submit" onClick="alert('Your form would have been submitted')">
    </td>
  </tr>
</table>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details