SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 35 of 35
  1. #26
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, that's good to know! Thanks, pmw57.
    Hmmm, so is there any way to display a label inside of an input or text area? Or is that impossible?

    I would still like to have my inputs stand out (in a unique way) while keeping them usable and accessible. And I'm hoping that with JavaScript I can achieve that!

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #27
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The purpose of the label element in a form is to allow people to gain focus on a form element by clicking on the ordinary text.

    I suspect that what you're asking for is placeholder text in the form element itself.

    The form itself can define the placeholder text in the value attribute. This also allows us to later on check the defaultValue property which refers to the original value of the field.

    Code html4strict:
    <form id="myForm">
        <p><label>Name: <input type="text" name="name"
            value="Enter your name"></label></p>
        <p><label>Comment: <textarea name="comment">
            Please enter a comment</textarea></label></p>
    </form>

    When someone clicks on the field element we want to clear the field prompt and be ready for typing. When they click away, we want to check if the field is empty and if so, update the field so that the prompt returns.

    We also want the default values to look different, more faded than the normal text. We can do that by applying a class called "faded" when the default prompt text is visible.

    Code css:
    .faded {
    	color: #ccc;
    }

    Here is the script that sets up the form when the page loads. If you place your scripts at the bottom of the page (as you should) just before the </body> tag, you can leave the script as it is.

    If you place your scripts in the head of the document then you'll need to use some kind of window.onload method to run the script after the page has finished loading.

    Code javascript:
    var form = document.getElementById('myForm');
    var els = form.elements;
    var el, i;
    for (i = 0; el = els[i]; i++) {
    	if (isTextArea(el) || isTextInput(el)) {
    		el.onfocus = clearFieldPrompt;
    		el.onblur = updateFieldPrompt;
    		el.onblur();
    	}
    }
    function isTextArea(el) {
    	return el.nodeName === "TEXTAREA";
    }
    function isTextInput(el) {
    	return el.nodeName === "INPUT" && el.type === "text";
    }

    There are a few things here to note. The for loop doesn't perform the standard els.length check; it assigns a variable instead. This helps to show what we're actually using the loop for, and it will end when it can't assign any more values.

    After the onblur event is assigned we run it. This allows the page to take on the default display for the form elements as the page is loading.

    After the page has loaded and people are using it, there are a couple of things that need to occur.

    When a field is entered, the clearFieldPrompt() function checks if the field is the same as the default value of the field. If it is then it clears the field and removes the faded class.

    Code javascript:
    function clearFieldPrompt() {
    	if (this.value === this.defaultValue) {
    		this.value = '';
    		removeClass(this, 'faded');
    	}
    }

    When the field is left, we need to show the default value once again if it's been left empty. The field should also be faded if it's the default text as well. These checks are performed separately because the field won't initially be empty when the page loads.

    Code javascript:
    function updateFieldPrompt() {
    	if (this.value === '') {
    		this.value = this.defaultValue;
    	}
    	if (this.value === this.defaultValue) {
    		addClass(this, 'faded');
    	}
    }

    Finally, you may have noticed that we're using addClass() and removeClass() functions. These help us to not affect any pre-existing classes on the fields.

    Code javascript:
    function hasClass(el, name) {
    	return !!el.className.match(new RegExp('(^|\\s)' + name + '(\\s|$)'));
    }
    function addClass(el, name) {
        if (!hasClass(el, name)) {
    		el.className = name;
        } else {
            el.className += " " + name;
        }
    }
    function removeClass(el, name) {
    	var re = new RegExp('(^|\\s)' + name + '(\\s|$)');
    	if (hasClass(el, name)) {
    		el.className = el.className.replace(re, ' ');
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #28
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow...! Fantastic post, pmw57!!

    I have inserted all of the JS code you mentioned above into highlight_bottom.js and have also inserted the new contact form code onto my contact page and added some CSS....

    And it works!!!!!
    (At least in Firefox)

    I had to remove highlight.js because otherwise it would retain the onFocus/onBlur attributes when clicking in and out of inputs. Hmmm, but it looks like this removed the IE6/IE7 fix as well... So perhaps I just need to change some more of the code that's inside of highlight.js?

    Oh, and also - Can I have my inputs/text areas set globally so that they don't need to be inside of the div id "myForm"? Or will I just need to move all of my existing forms into <div id="myForm">? Just wondering what the easiest way to do this is...

    My many many many thanks for getting me this far! You guys have been an enormous help!

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  4. #29
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    When it comes to labels, there's an improved way over the old way of doing them.

    The improved way is where the label contains the form element, so they don't require an identifier

    Code html4strict:
    <p><label>Name: <input type="text" name="name"></label></p>
    One caveat is that this method does not work in IE6. Clicking the label text does not give the relevant form control focus.

    Also, I didn't know about defaultValue, so I'm glad I've learned something here.

  5. #30
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I have also noticed that it's still not yet working 100% in IE6/IE7. Hopefully some code replacement will fix that!

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  6. #31
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I noticed that with Google Toolbar installed, it adds that annoying autofill yellow background. So far I've tried a couple of scripts that I found online but they only seem to work for IE or interfere with the code I've already got on my inputs... I wish that Google introduced a way to fix this and not just by "tricking" it with a background color !important, but sitewide entirely.

    Any ideas?

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Yes, you can easily change it to work not just on one form, but all forms.

    This is the code that is currently being used to apply it to a certain form.

    Code javascript:
    var form = document.getElementById('myForm');
    var els = form.elements;
    var el, i;
    for (i = 0; el = els[i]; i++) {
        if (isTextArea(el) || isTextInput(el)) {
            el.onfocus = clearFieldPrompt;
            el.onblur = updateFieldPrompt;
            el.onblur();
        }
    }

    Before we try to make the above work across all of the forms on the page, we'll first separate out certain parts into different functions.

    Code javascript:
    var form = document.getElementById('myForm');
    foreach(form.elements, initField);
    function foreach(els, fn) {
    	var el, i;
    	for (i = 0; i < els.length; i++) {
    		fn(els[i]);
    	}
    }
    function initField(el) {
    	if (isTextArea(el) || isTextInput(el)) {
    		el.onfocus = clearFieldPrompt;
    		el.onblur = updateFieldPrompt;
    		el.onblur();
    	}
    }

    Now from the above code we can change the top two lines so that it works across all forms on the page.

    Code javascript:
    foreach(document.forms, function (form) {
    	foreach(form.elements, initField);
    });
    function foreach(els, fn) {
    	var el, i;
    	for (i = 0; i < els.length; i++) {
    		fn(els[i]);
    	}
    }
    function initField(el) {
    	if (isTextArea(el) || isTextInput(el)) {
    		el.onfocus = clearFieldPrompt;
    		el.onblur = updateFieldPrompt;
    		el.onblur();
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Raffles View Post
    One caveat is that this method does not work in IE6. Clicking the label text does not give the relevant form control focus.

    Also, I didn't know about defaultValue, so I'm glad I've learned something here.
    It's about time to consider pulling support for IE6 due to its extremely buggy nature.
    SitePoint Blogs: Is it time to ditch IE6?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #34
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great article, Paul. Thanks for the link!

    Microsoft just seems like one of those companies that sticks their hand in the wrong cookie jar sometimes... And the cookie jar I am referring to in this case has the label "Web Development" on it.

    Has anybody else noticed that IE7 loads faster than FF3 on Vista? It makes me want to buy a Mac! Anyways, I am not trying to bash PC or Windows, because when it comes down to it, we can really find flaws in any operating system.

    Anyways, considering the undesirable CSS support of IE6, I think I will drop all support on it and have a thickbox popup informing IE6 users to upgrade their browser to get the "full experience"...

    They can still browse the site this way and it will not be blocking them out completely but at least they can be educated on their poor choice of browser.

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  10. #35
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Firefox 3.1 is going to come with TraceMonkey which is set to blow Firefox performance through the roof.
    http://ejohn.org/blog/tracemonkey/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •