Helpful Hints for Form Input

When you have limited space on your home page or any other page for that matter, it is nice to provide a little more helpful information for the use where form space is limited. Now, by just adding a single attribute to your input text, your will get the gray help text in your input box.

<input class="standout" type="text" />hintvalue="Search ..." class="smallbox" name="s" type="text" autocomplete="off" />

Just add the javascript from this article and any styles that you want and you are done. Here is a working example. Click in the boxes and watch it work.

How it works

The guts of the work is done in javascript in two objects. The first is a simple object called ClassName that will add or remove a class name from any object like the input tag. You could just set the className of the object and then delete it when done, but the ClassName object allows for multiple classes to be set on the input tag.

ClassName = {
    add: function (obj, clsName) {
        if(!ClassName.exists(obj,clsName)) obj.className+=obj.className?' '+clsName:clsName;
    },
    remove: function (obj, clsName) {
        obj.className=obj.className.replace(obj.className.match(' '+clsName)?' '+clsName:clsName,");
    },
    exists: function (obj, clsName) {
        return new RegExp('\\b'+clsName+'\\b').test(obj.className);
    }
};

The Hint object is the main object that makes everything work. It performs 5 primary functions. It initializes all input tags that have the hintvalue attribute set with an onFocus and onBlur event to show or hide the hint. When the form is submitted, any hints will be removed so the server gets the intended value. There is also a function to dynamically attach an event to any html/dom object.

Hint = {
    cls_name: "hint_display",
    attr_name: "hintvalue",
    show: function (inputObj) {
        if (inputObj.target) inputObj = inputObj.target;
        else if (inputObj.srcElement) inputObj = inputObj.srcElement;
        if (inputObj.value.length == 0) {
            ClassName.add(inputObj, Hint.cls_name);
            inputObj.value = inputObj.getAttribute(Hint.attr_name);
        }
    },
    hide: function (inputObj) {
        if (inputObj.target) inputObj = inputObj.target;
        else if (inputObj.srcElement) inputObj = inputObj.srcElement;
        if (ClassName.exists(inputObj, Hint.cls_name)) {
            if (inputObj.getAttribute(Hint.attr_name) == null) {
                inputObj.setAttribute(Hint.attr_name, inputObj.value);
            }
            inputObj.value = "";
        }
        ClassName.remove(inputObj, Hint.cls_name);
    },
    submit: function () {
        tags = document.getElementsByTagName("INPUT");
        //submit: function (formObj) {
        //tags = formObj.getElementsByTagName("INPUT");
        for (var i = 0; i < tags.length; i++) {
            if (ClassName.exists(tags[i], Hint.cls_name)) tags[i].value = "";
        }
    },
    listen: function(element, evtName, funcPtr) {
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (element.addEventListener) {
            element.addEventListener(evtName, funcPtr, false);
        } else if (element.attachEvent) {
            element.attachEvent('on'+evtName, funcPtr);
        } else return false;
        return true;
    },
    init: function(parentObj) {
        //if (parentObj == null) parentObj = document;
        parentObj = document;
        var tags = parentObj.getElementsByTagName("INPUT");
        for (var i = 0; i < tags.length; i++) {
            if (tags[i].getAttribute(Hint.attr_name) != null) {
                hintval = tags[i].getAttribute(Hint.attr_name);
                if (tags[i].value == hintval || tags[i].value == "") {
                   tags[i].value=hintval;ClassName.add(tags[i], Hint.cls_name);
                } else 
                   ClassName.remove(tags[i], this.cls_name);
                // Now add the events
                if (!Hint.listen(tags[i], 'blur', Hint.show) ||
                    !Hint.listen(tags[i], 'focus', Hint.hide)) {
                    // if we can't add the events, no hints.
                    tags[i].value="";
                    ClassName.remove(tags[i], Hint.cls_name);
                }
            }
        }
        for(j=0; j<document.forms.length; j++) {
            Hint.listen(document.forms[j], 'submit', Hint.submit);
        }
    }
};

Finally, call the hint initialization when the page is fully loaded and add any styles to make the boxes and text display like you want them to.

Hint.listen(window, 'load', Hint.init);
/* css styles */
/* What will the hint text look like?  This will make it gray */
.hint_display {color:#666666}
/* Now, make the the search box have small text and a blue border */
.smallbox {font-size:70%;border-color:blue;}

A Little Explanation

After more than a year of absolutely positioning divs to put the hint text above a text box and dealing with all the cross browser issues that came with that, not to mention more markup and quite a bit of time, I finally resorted to changing the value of the text box to show the hint and just add a class to allow it to look like a hint.

This has solved all positioning problems associated with the divs approach. The only problems now are that you cannot use an image as the hint like this website and the hint must be hidden when the form is submitted. Not much can be done about the images and that is not a big problem for me. As for the submitting issue, I have added an event to each form to remove the hint text when the form is submitted. So, why is that a problem? Some forms are submitted through a custom function and sometimes ajax is used to validate form fields on the fly. These will still work, but care must be taken to capture the value correctly. I.e. If ajax also validates a field on the onBlur event, that listener must be registered before the hints onBlur event.

Put it all together

Include the following javascript file in your web page and add the hintvalue attribute to your input tag and you are ready to go.
Javascript

See the full example here: HTML Example

Conclusion

This is a very simple and easy to use set of functions to provide a fully functional hint and any input field. Give it a try.

Challenge to anyone who wants to try: Because of the events added to form fields and the form itself, an excellent extension to this would be to add a validate attribute to the field that would act as a regular expression to check in the onBlur.

Any takers?

Blog Comment

Posted by Mens Swiss Girard Perregaux Watch on
“For someone who remains unidentified to claim that someone of M. Hudson’s accomplishments does “not fully grasp” a widely understood concept, is, well, a little much.” Mens Swiss Girard Perregaux Watch http://www.watches-city.com/brands/girard-perregaux.html
Posted by Shanna29Kemp on
I opine that to receive the personal loans from banks you should present a firm reason. Nevertheless, one time I have got a car loan, because I wanted to buy a car.
Posted by Charfase on
Hydrochlorothiazide Online Bestellen levitra without prescription Clomid Effets Secondaires Duphaston Cialis Generico En Farmacias Espanolas Accutane 10mg Possible Side Effects For Amoxicillin Comprar Viagra Sin Receta Espana viagra online pharmacy Macrobid No Physician Approval Online Cash On Delivery Fluoxetine Overseas viagra No Prescription Acheter Du Cialis En Europe cialis Levitra Not Effective Amoxicillin 21 Vibramycin Dosage Acquistare Levitra Bayer Amoxicillin Skin Treatment cialis Viagra Cialis Simili Purchase Isotretinoin Price online pharmacy Nolvadex Medicaments Et Remedes Cialis Viagra Generico Online Cheap Viagra Overnight Amoxicillin Rss Feed Super Kamagra Cialis viagra online Precio Cialis Farmacia Cruz Verde Buy Now Online Zentel cialis online pharmacy Cialis Professional Samples Vipps Certified Pharmacy Generic Antabuse Pills Viagra E Aspirina Priligy Dapoxetina Opinioni cialis buy online Amoxicillin High Dose Comment Prendre Le Cytotec generic viagra Levitra Orodispersibile Prezzo In Farmacia Cialis O Viagra O Levitra Prozac Online Cialis Original Kaufen Cialis Levitra Ohne Rezept kamagra online with next day shipping Acquisto Viagra O Cialis Buy Synthroid Online Canada viagra Direct On Line Doryx Secure Ordering Store Express Delivery Santa Ana Where To Purchase Chat Lagyl Accutane 60mg Viagra Acquistasi Will Amoxicillin Help Hand Foot Mouth Inderal Cost Propecia Laboratorios Acyclovir 400mg From Canada cialis Bayer Levitra Effets Secondaires Clomid C Est Comment Amoxicillin Levitra Eye Side Effects Propecia Low Testosterone Drug Amoxil Online Fast Come Kamagra Achat De Clomid En Ligne Buy Antabuse Online Usa Nolvadex Side Effects Viagra Otras Pastillas Generic Sildenafil Durer Plus Longtemps Chambres Bentyl Medication viagra Indian Euromed Viagra Zithromax Mastercard Buy Cytotec Online Usa No Prescription Pharmacy Online Prospecto De Propecia Low Price Zoloft Commander Lioresal 10mg Clomid Avant Ovulation action du propecia Achat Kamagra Oral Jelly Achat Cialis Petite Quantite buy viagra online Viagra 100 Mg Tablet Online Generic Propecia For Sale Where To Buy Nolvadex Costo Cialis In Italia Azithromycin Vs Zithromax Teva Amoxicillin Viagra. Best Price Cialis Billig Kaufen Ohne Rezept Low Price Deltasone Best Viagra Online Achat Cytotec Algerie viagra Amoxil For Cats Amoxicillin Prescription Drug viagra cialis Amoxicillin Suspension Dosages Buy Estrogen Pills Propecia Cheap Price Order Viagra From Canada Buy Atarax No Script cialis Comprar Cialis 20 Mg Original Levaquin Bacterial Infections Best Generic Viagra Acquista Propecia 5 Alfa Reduttasi Generic Keflex Pills Purchase Lasix Usa Viagra Prostatite Achat Viagra Dapoxetine En Ligne 259 Buy Nolvadex Online Pharmacy Dapoxetine And Cialis Levitra Media Pastilla Buy Cytotec Canada For Sale Levaquin Levox C.O.D Buy Propecia Finasteride Australia Cheap Cialis Does Cephalexin Help With Cellulites Cephalexin Tanning Lasix Prices Isotretinoin Purchase On Line Low Price Overseas Chandler Viagra For Less Cialis Free Offer Viagra Pills Online Buy Viagra In Psichiatria Kamagra Forum Precio De Propecia Priligy Approved By Fda Clomiphene Cheap Antibiotics For Sale Uk Zentel 400mg Can I Purchase Cheap Zithromax On Line Amoxicillin Yeast Infection
Posted by Adriezanrew on
Hello. And Bye.
Leave a Reply



(Your email will not be publicly displayed.)


Captcha Code

Click the image to see another captcha.


Episcopal Foundation of Wyoming
Episcopal Foundation of Wyoming

Larger Image

Thank you. We appreciate the expediency in which you addressed the items from our meeting. And thanks for throwing in the Last Pending item. You Rock!!

Nadine Wilson
Office Manager
WEST, Inc.