|
|
|
|
|
|
| |
|
**************************************************************
* title : Enchancing dd/mm/yyyy forms with unobtrusive javascript
*
* story : Two javascript functions to enchance interaction with
* HTML forms. The focusForm will focus to the first
* input type='text' field which is not disabled.
*
* The applyDates function will draw dd, mm, and yyyy letters
* in the appropriate fields. These will be erased on focus
* and redraw again on blur and when the user hasn't
* writen anything in them. It's pretty useful because
* you dont have to explicitly state what goes in which
* field with extra <label> elements on the markup.
* So just have a class='dd' or class='mm' or class='yyyy'
* in the fields you want this behaviour to be applied
* and the rest will be done for you.
*
* Live demo @ LINK1http://temp.cherouvim.com/forums/ddmmyyyyLINK1
*
* author : Ioannis Cherouvim
* web : http://cherouvim.com
* date : 2005-12-12
**************************************************************
//////////////////////////////////////////////////////////////
//script.js
applyDates = function() {
var inputs = document.getElementsByTagName("input");
for(var i = 0, length = inputs.length; i < length; i++) {
if ((inputs[i].className=='dd') ||
(inputs[i].className=='mm') ||
(inputs[i].className=='yyyy') ) {
inputs[i].setAttribute('autocomplete', 'off');
if (inputs[i].value=='')
inputs[i].value=inputs[i].className;
inputs[i].onfocus=function() {
if(this.value==this.className)
this.value='';
}
inputs[i].onblur=function() {
if(this.value=='')
this.value=this.className;
}
}
}
}
focusForm = function() {
var inputs = document.getElementsByTagName("input");
for(var i = 0, length = inputs.length; i < length; i++) {
if ((inputs[i].getAttribute("type"))=="text" && !inputs[i].disabled) {
inputs[i].focus();
return;
}
}
}
window.onload = function() {
if(document.getElementById && document.createTextNode) {
focusForm();
applyDates();
}
}
//////////////////////////////////////////////////////////////
//demo HTML
<html>
<head>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<label for='name'>Name:</label>
<input maxlength='16' id='name' name='name' type='text'/><br/>
<label for='dob'>Date of Birth:</label>
<input maxlength='2' size='2' id='dob' class='dd' name='dd' value='' type='text'/>
<input maxlength='2' size='2' class='mm' name='mm' value='' type='text'/>
<input maxlength='4' size='4' class='yyyy' name='yyyy' value='' type='text'/><br/>
<label for='email'>E-Mail:</label>
<input maxlength='32' id='email' name='email' type='text'/><br/>
</body>
</html> | |
|
|
| Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Javascript linked dropdowns
Categories : Java Script, HTML, Classes and Objects | | | Bouncing Marquee at Status Bar
Categories : Java Script, HTML, Browsers | | | Local-to-user date and time display regardless of time zone or where the website's server is located
Categories : PHP, Date Time, HTML and PHP, Java Script | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | Check if Javascript is Enabled or Disabled - Works in all Browsers
Categories : Java Script, HTML, Web Browsers | | | Local Time clock and Server time usign PHP and JavaScript
Categories : PHP, Java Script, Date Time, Beginner Guides | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password.
improved security using time functions to initialize random number generator.
Categories : Java Script, HTML, Security, Authentication, Strings | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Java Script which implements a Clock (Client Side)
Categories : Java Script, Date Time | |
|
|
