- birdland
I’m looking for some help in regard to the following code, which clears the default value of an input box when the control gains focus (much like the behavior of the ASU search box).
<input type="text" name="birthDateMonth" id="birthDateMonth" maxlength="2" value="MM" class="numeric" onfocus="if (this.defaultValue && this.value == this.defaultValue) { this.value = ''; }; this.style.backgroundColor='#f2f2e6'; this.setAttribute('class','highlight')" onblur="this.style.backgroundColor='#fff'" />(The “highlight” class is being applied to turn a user-inputted value black as the user types it, after the default light-grey placeholder text has been cleared by the DOM event)
The last piece of functionality I want to add is to restore the default value when the control loses focus (onblur), but only if nothing has been typed in the box, or the content of the box has been cleared manually.
The logic required for this to happen may be more trouble than it’s worth, but I wanted to see if anyone had suggestions. Your help would be greatly appreciated.
I've broken the textfield out a bit for organization, but it should still work the same:
<style>
.highlight{
color: #999999;
}
</style>
<script>
var defaultvalue = "MM";
function clearme(field) {
field.setAttribute("class","");
if (field.value == defaultvalue) {
field.value = "";
}
}
function checkme(field) {
if(field.value == "") {
field.value = defaultvalue;
field.setAttribute("class","highlight");
}
}
</script>
<input type="text" value="MM" class="highlight" onfocus="clearme(this);" onblur="checkme(this);" />
Hope that helps
Mr. Bailey: You sir, are a genius. The code worked great! What I didn't tell you is that I need this behavior applied to several fields, so here's what I did:
<script type="text/javascript">
var defaultvaluemonth = "MM";
function clearMonth(field) {
field.setAttribute("class","highlight");
if (field.value == defaultvaluemonth) {
field.value = "";
}
}
function checkMonth(field) {
if(field.value == "") {
field.value = defaultvaluemonth;
field.setAttribute("class","numeric");
}
}
var defaultvalueday = "DD";
function clearDay(field) {
field.setAttribute("class","highlight");
if (field.value == defaultvalueday) {
field.value = "";
}
}
function checkDay(field) {
if(field.value == "") {
field.value = defaultvalueday;
field.setAttribute("class","numeric");
}
}
var defaultvalueyear = "YYYY";
function clearYear(field) {
field.setAttribute("class","highlight");
if (field.value == defaultvalueyear) {
field.value = "";
}
}
function checkYear(field) {
if(field.value == "") {
field.value = defaultvalueyear;
field.setAttribute("class","numeric");
}
}
</script>
<style>
input.highlight {
color: #000;
margin-right: 3px;
padding: 2px 3px;
text-align: center;
background-color: #f2f2e6;
}
input.numeric {
margin-right: 3px;
color: #8f8f8f;
text-align: center;
padding: 2px 3px;
}
</style>
<fieldset id="enter_bday">
<input type="text" name="birthDateMonth" id="birthDateMonth" maxlength="2" class="numeric" value="MM" onfocus="clearMonth(this);" onblur="checkMonth(this);" />
<input type="text" name="birthDateDay" id="birthDateDay" maxlength="2" class="numeric" value="DD" onfocus="clearDay(this);" onblur="checkDay(this);" />
<input type="text" name="birthDateYear" id="birthDateYear" maxlength="4" class="numeric" value="YYYY" onfocus="clearYear(this);" onblur="checkYear(this);" />
</fieldset>
Let me know if you see a way this could be cleaned up. Otherwise, thanks for the help!