|
|
|
|
|
|
| |
| **************************************************************
* 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 | | | Fancy "Quick Access" Navigation Link
Categories : Java Script, Navigation, User Interface, DHTML, HTML | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Calendars to choose a range of dates , reservation events ...
Categories : PHP, Calendar, Java Script, Date Time | | | Java Script which implements a Clock (Client Side)
Categories : Java Script, Date Time | | | Local Time clock and Server time usign PHP and JavaScript
Categories : PHP, Java Script, Date Time, Beginner Guides | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | Javascript Date Picker
Categories : Java Script, Date Time, Calendar | | | enhanced date picker with jcript checking for a dynamic date input
Categories : PHP, Java Script, Date Time, Calendar, Arrays | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | |
|
|
|
