CODEWITHSUNDEEP
javascriptcss
nicholas
nicholas

Reputation: 14593

persistant html input placeholders

A bit of an odd one... what I'd like is for my input placeholder text to do something like:

::-webkit-input-placeholder {
    text-align:right;
    opacity:.3;
}

when the user enters text instead of disappearing entirely. Is this at all possible without a huge javascript hack?

Thanks

Upvotes: 2

Views: 761

Answers (2)

nicholas
nicholas

Reputation: 14593

So, it looks like there is no way to get this behavior purely through CSS.

I've come up with a quick jQuery plugin that will do it for me. Here's the code: http://jsfiddle.net/puTM3/

A quick:

$("input[placeholder]").placeholder();

once the dom is loaded should take care of 90% of your use cases.

What sucks is if you edit the dom dynamically, any new/modified inputs need to be re.placeholder()ed.

Anyone have any better ideas?

Upvotes: 1

MayThrow
MayThrow

Reputation: 2201

If you are not going to do that to a lot of input boxes, Using background image (with your placeholder text) would help

 input {
    background:white url(bgtextimage.png) no-repeat; /* image with your placeholder text*/
    }
    input:focus {
    background:white url(bgtextimage_3.png) no-repeat; /* placeholder text image with an opacity if 0.3 */
background-position: right 0px; /* if you want to align text to right */
    }

Now you need to stop the background image from moving left when the element is out of focus. I'm using jQuery for this purpose

$('.myinputfield').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).css('background','left 0px'); //keep it to left if the element is empty
    }
    else {
        $(this).css('background-position','right 0px'); //move to right if there's some text
    }
});​

Example - http://jsfiddle.net/QuHen/1/

Upvotes: 2

Related Questions