[SOLVED] Understanding Default Values

[DarkxPunk]

First I will preface with YES I have done my share of research, but its still blowing over my head. Now this is my goal: I want to create a function that is versatile in that I don't need multiple for each time I use it. AKA it needs to be dynamic. I have played with this in the past doing show/hide stuff, but I can't make it fit doing what I want here. So now I want a function that will take the value of a form input on focus, compare it to a var connected to a class or id then erase it, then if the focus is blurred and the inputs value is empty to fill in the text that was in the var associated to the class or id. Now I think this can be done using EventListeners, my concept is on focus (any focus) detect value, compare value in a var then clear the value. Then on blur if empty replace text with var. What I don't understand is how to get the EventListener to work, how does it detect events without being called? Do I have to loop or no? Its confusing. Thanks for any help. Let me try to explain better [Form Field - Value: Textallot - ID: textAllot] {focus} ID is textAllot, var associated with the ID textAllot has the value of 'Textallot' both the Form Value and Var Value are == so now we clear text. {blur} Form Value is empty, ID is textAllot, var associated with ID textAllot has the value of 'Textallot', replace Form Value with 'Textallot'. else if Form Value is not empty do nothing. Better?

Edited November 6, 2012 by DarkxPunk

[Charles @ CodeConquest.com]

I have to say, I'm having trouble understanding what you want to do. Perhaps explain just how you want it to function (don't go into the code side of it, just explain it from a user's perspective), and what purpose is it for?

[Ingolme]

It sounds like you want to replicate the functionality of the placeholder attribute. You seem to have described the functions in your post already. The only problem is that you won't be able to use values with spaces in them as IDs.

// Onfocus handler:function clearField(e) {    e = e ? e : window.event;    var el = e.target ? e.target : e.srcElement;    if(el.value == el.id) {	    el.value = "";    }}// Onblur handler:function defaultText(e) {    e = e ? e : window.event;    var el = e.target ? e.target : e.srcElement;    if(el.value == "") {	    el.value = el.id;    }}

[ShadowMage]

To get around the problem with Ingolme's code (ie, not using spaces) you could create an array map that maps each id to a default value:

//Map the id's with their default valuesvar defValues = {  'idA': 'Default A',  'idB': 'Default B',  'idC': 'Default C'}// Onfocus handler:function clearField(e) {  e = e ? e : window.event;  var el = e.target ? e.target : e.srcElement;  if(el.value == defValues[el.id]) {    el.value = "";  }}// Onblur handler:function defaultText(e) {  e = e ? e : window.event;  var el = e.target ? e.target : e.srcElement;  if(el.value == "") {    el.value = defValues[el.id];  }}

Edited October 30, 2012 by ShadowMage

[DarkxPunk]

Thank you everyone. Will look over this all tonight.

[dsonesuk]

???? I'm not saying that you have not already researched this, but you do know about .defaultValue how it can be used to compare if value matches the default value on blur and focus events. <input type="text" value="Enter value" name="something" onblur="if(this.value == this.defaultValue || this.value == ''){this.value=this.defaultValue;}" onfocus="if(this.value == this.defaultValue){this.value=''}" >

[DarkxPunk]

???? I'm not saying that you have not already researched this, but you do know about .defaultValue how it can be used to compare if value matches the default value on blur and focus events. <input type="text" value="Enter value" name="something" onblur="if(this.value == this.defaultValue || this.value == ''){this.value=this.defaultValue;}" onfocus="if(this.value == this.defaultValue){this.value=''}" >

Actually I was too busy researching event listener I will defiantly give this a try, thanks.

[DarkxPunk]

Worked great dsonesuk! Thanks!

[ShadowMage]

There is a gotcha, though, if you're using textareas with the defaultValue property. See http://www.sophox.com/wordpress/?p=921

[DarkxPunk]

There is a gotcha, though, if you're using textareas with the defaultValue property. See http://www.sophox.com/wordpress/?p=921

interesting, but it's not replacing the defaultvalue when I change the content... Is it browser specific?

[dsonesuk]

Only IF you set text/value by using innerHTML

Best practice says to write your code consistently, so that it works correctly every time. Best practice also says to use similar objects in a similar fashion. Despite the way its HTML is structured, a <textarea> is still analogous to an <input> element. The contents of each can be changed by modifying its value property.So I recommend doing it that way. Every time.And if you ever do need to modify the default value of an element, modify its defaultValue property. Every time.As for the innerHTML property of a <textarea>? Stay away from that thing. It's nothing but trouble.

[ShadowMage]

What browser are you using? The following exhibits the behavior mentioned in that link in FF:

<!DOCTYPE html><html><head><title>Textarea Test</title> <script type='text/javascript'>window.onload=function() {	var dump = document.getElementById('dump');	var txt = document.getElementById('txt'); 	dump.innerHTML += "<b>Before<b><br />";	dump.innerHTML += "innerHTML: "+txt.innerHTML;	dump.innerHTML += "<br />defaultValue: "+txt.defaultValue; 	txt.innerHTML = "This is the new innerHTML"; 	dump.innerHTML += "<br /><b>After<b><br />";	dump.innerHTML += "innerHTML: "+txt.innerHTML;	dump.innerHTML += "<br />defaultValue: "+txt.defaultValue;}</script></head> <body><div id='dump'></div><textarea id='txt'>This is the default value</textarea></body></html>

EDIT:Chrome, Opera, and Safari also exhibit this behavior. IE (8) is the only one that did not modify the defaultValue when the innerHTML was changed.

Edited November 6, 2012 by ShadowMage

[DarkxPunk]

I used dsonesuk method. I think I misunderstood the article. No problem anyway dsonesuk method works so.