Jump to content

[SOLVED] Understanding Default Values


DarkxPunk
 Share

Recommended Posts

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 by DarkxPunk
Link to comment
Share on other sites

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;    }}

Link to comment
Share on other sites

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 by ShadowMage
Link to comment
Share on other sites

???? 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=''}" >

Link to comment
Share on other sites

???? 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 :P I will defiantly give this a try, thanks.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 by ShadowMage
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...