CODEWITHSUNDEEP
javascriptcss
nanobash
nanobash

Reputation: 5500

Show placeholder text in empty input fields

How it is possible that during onfocus (on input field) input default value seen like it is disabled but on input field could be written anything like default value isn't exists ?

here is simple html =>

<input type="text" id="x">

and javascript =>

document.getElementById("x").onfocus = function(){
this.style.opacity = 0.5;
}

but I couldn't do what I want.

Upvotes: 2

Views: 19898

Answers (3)

GNi33
GNi33

Reputation: 4509

With "HTML5", new functionality and attributes have been introduced for form-Elements (such as built-in form-validation for example)

One of those is the placeholder - attribute. It shows a specified text on empty input-Fields that will be hidden, after a user starts to fill text in the field. The HTML-Markup looks like this:

<input type="text" name="first_name" placeholder="Fill in your name">

This feature is not supported by all browsers yet (you can check compatibility on caniuse.com

In your code, you can check for compatibility with a simple function:

var placeHolderSupport = ('placeholder' in document.createElement('input'));

For older browsers, you would need to write a fallback JavaScript - Function, that reads this attribute and implement the behaviour yourselve. There are some blog-posts about this around the web, like one from David Walsh, that could help you with this.

edit:

I stumbled over this gist by Hagenburger (according blog-post), that should implement the behaviour you want to achieve for old browsers too. Note: it's jQuery - code, not sure if you are using it, but even if not, it should give you an idea, what to do.

So, given the compatibility - check from above:

if(!placeHolderSupport){
    //gist code here (not sure if i'm allowed to copy this into my answer)
}

Like that, the native placeholder-implementation of the browser would be used, if it exists, otherwise, the JavaScript-function would take care of this.

update 09/11/2012

SO-User and Moderator ThiefMaster just pointed out a better and newer jQuery-plugin by Mathias Bynens, that already has built-in check for placeholder - support. Surely a better way to implement the placeholder-fallback than the gist I posted:

jQuery Placeholder at github

Upvotes: 8

Robin Maben
Robin Maben

Reputation: 23034

<input type="text" data-placeholder="Name" />


$(function(){
    $('input').each(function(){
    if($(this).val() == ''){
        $(this).val($(this).data('placeholder'));
    }
});

});
$('input').focusin(function(){
    if($(this).val() == $(this).data('placeholder')){
        $(this).val('');
    }
}).focusout(function(){    
    if($(this).val().length < 0){
        $(this).val($(this).data('placeholder'));
    }
})​;​

See example quick and dirty example here.

Upvotes: 0

Vinit
Vinit

Reputation: 1825

<input type="text" value="blah" name="Email"
 id="Email" onblur="this.value = 'blah';"
 onfocus="this.value = 'blah';" />

Upvotes: 0

Related Questions