CODEWITHSUNDEEP
javascriptjqueryhtmlcss
h2O
h2O

Reputation: 544

make default value in textbox not change till text is entered using jQuery

Please check my fiddle at http://jsfiddle.net/7995m/ . In the fiddle, the default text disappears as soon as the text box is clicked. I want the default text to not change till text is written. The following is my code:-

$(".defaultText").focus(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();

Upvotes: 0

Views: 3905

Answers (5)

Spencer
Spencer

Reputation: 1522

This will get you started with using the HTML5 placeholder attribute http://davidwalsh.name/html5-placeholder

It is commonly used in web applications.

If the browser you're targeting doesn't support placeholders, you can create a polyfill using modernizr to support the html5 attribute. Here is a polyfill using jquery https://github.com/mathiasbynens/jquery-placeholder

You can find additional polyfills for placeholders or other html5 attributes here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Here is a link to modernizr http://modernizr.com/

After creating the polyfill, the modernizr will detect if the browser rendering the page supports the placeholder attribute and if it doesn't, the polyfill will emulate the behavior. This way, the HTML code isn't polluted with a custom solution and future browsers will be unaffected if they support placeholders.

This is really the best way to go. Creating a custom solution is great in the short-term, but using a polyfill like this helps to avoid potential problems in the long term, such as new browsers not being compatible with the custom solution a year down the road. Using a polyfill to fill in the functionality for the HTML5 attribute will ensure your application won't break in the future while allowing for the same functionality in older browsers. It also aids in the readability of your html code.

Upvotes: 3

HIRA THAKUR
HIRA THAKUR

Reputation: 17757

working fiddle

just replace your focus by keydown.Placeholder is a good solution,but IE7,8,9 does not support it.So instead of using some js(there are som polyfills available),I would suggest you to continue with this code itself.

$(".defaultText").keydown(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();

Upvotes: 2

zewa666
zewa666

Reputation: 2603

if you really want to achieve this, although it is not quite the standard behaviour use this instead your focus event:

$(".defaultText").keydown(function(srcc)
{

        $(this).removeClass("defaultTextActive");
        $(this).val("");

});

but definitely use the placeholder tag, which is the right way to go

Upvotes: 0

user2647939
user2647939

Reputation:

You could use placeholder attribute.

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122008

Reduce your no.of lines of code,By using placeholder attribute.

Ex

<input type="text" name="first_name" placeholder="Your first name...">

Demo Fiddle

Upvotes: 2

Related Questions