A lots of the time you want to add instructions to text box fields of the page to provide usability information to the users. Alternate way of doing this could be using default text in the input fields. A default text is the text which appears in the text box when it is empty.

Name Email Website Comment. You can see this is useful and good idea to have this in the UI. There is an easy trick in jQuery to do this.

Below is the step by step procedure to do this.

"Default Text" Fields Using Simple jQuery Trick - Daily Coding - daily coding tips and tricks, C#, .NET, bozunoteyuta.web.fc2.com, SQL - default text, jQuery trick, default text input

Step1 If you don't have jQuery then download latest from its website and include in you page. Step 4 To every text field or text area where you want to apply default text add "defaultText" as css class and specify the default text in the title attribute. You default text setup is ready. Run the page and see the magic. Click here for a running sample page.

Categories All Posts Database Design General Others Scripting Web Windows Tools About Subscribe Subscribe RSS Subscribe by Email What is RSS? Name Email Website Comment You can see this is useful and good idea to have this in the UI. CSS Html Javascript jQuery Utility. Bill on Aug 2, Currently the text that is being put in the title attribute is posted back?

I would imagine there has to be a way using jquery to remove it on submit, but this is my first day looking into what is possible with jquery.

I found it from a link in a Matt Berseth article http: SeanJA on Aug 3, Alex on Aug 13, Vaibhav Gupta on Sep 12, Rubist on Feb 10, Andrew on Mar 21, So if i press the previous step button the default text looks like a regular one. In this case the document. How could i call it? I used this to re-style the default text: HeavyP on Apr 28, I've been hunting for something like this for days!

There is all sorts of different ways to skin this cat but working with multiple language and having the DEFAULT TEXT change too and load quickly was what I was looking for Does someone know how to make the PASSWORD how to earn money sfimg field change from TEXT to PASSWORD on select option jquery val, remain PASSWORD if something is typed in but if nothing is typed in or it remains DEFAULT VALUE it returns to TEXT?

How do I set the default value of an input box using jQuery? - Stack Overflow

That would be pretty slick indeed! Leandro Santana Pereira on May 3, Rinke van den Berg on May 20, At the end of the document. By the way, I would come here more often if there were just banners instead would you buy lloyds tsb shares nasty popups.

Niyaz on May 30, Thank you very much. Jordi on Nov 25, Anton Venema on Jan 4, It improves default detection when the entered text matches the title, it incorporates Alex's fix for form submission, and it allows reuse throughout a site. Danielle on Mar 18, Any ideas about how to detect when the browser autofills? The default text is attached as the "title" attribute of the DOM element: Thanks again Anton yann.

Steve on Jun 7, Atiq on Jun 19, Hegemon on Sep 1, Anuj on Jan 26, Helped to learn alot. Kris on Jan 30, Basically i am greating a page where the user can create more input fields by clicking a button, the input fields get created with the same look but with no default text.

The only thing i can think is that because the JQuery code only initiates input jquery value default document load and these are created afterwards they are not getting registered or something like that, today is my first time of using JQuery code. Dan on Feb 9, CodeMan on Apr 30, Steve Klebanoff on May 10, The first function does not need the 'srcc' parameter as its never used. Thanks for sharing this code, it is helpful and saved me some time. Nick on Jul 13, Specifically one that interact with the Webform module?

Coz I'd love to know searching hasn't turned up much. This is a great feature and a great article I've referred to a few times.

Definitely adds to a healthy UX. Steven Benjamin on Jul 28, Michael Schinis on Aug 3, Steve on Oct 21, Jeff Andersen on Oct 31, Steve O on Nov 14, Prateek Joshi on Dec 9, Please provide me a solution for this. Boheme on Jan 2, For the sake of those who need it: If I used this for real, I'd have default values in an XML file so a soft-refresh F5 would work right - in this "light" form, a custom-loaded or subsequently entered value might get interpreted as default on soft-refresh.

If you want something more customized, drop me a note at boheme. JackTheKnife on Jan 25, Veerendra on Mar 22, It saved some of my time. Check out the "placeholder" option: Anyway a quick fix would be to add an arbitary attribute to the password input field here i named it data-type: Benito on Feb 7, Ingrid on Jun 10, I'm wondering how to submit on keypress without the 'defaultTextActive' class showing. Submitting with the onclick works fine, but if I hit the enter key the onblur 'defaultTextActive' is not clearing CaptainHuge on Dec 8, Pawan Kumar on Feb 8, I have also find similar solution http: Click here to refresh.