javascript - 永続的な HTML 入力プレースホルダー

Question

ちょっと変わったものです...私が望むのは、入力プレースホルダーテキストが次のようになることです:

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

完全に消えるのではなく、ユーザーがテキストを入力したとき。巨大なjavascriptハックなしでこれはまったく可能ですか?

ありがとう

Answer 1

多くの入力ボックスに対してそれを行うつもりがない場合は、背景画像を（プレースホルダーテキストとともに）使用すると役立ちます

 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 */
    }

ここで、要素の焦点が合っていないときに背景画像が左に移動するのを止める必要があります。この目的のためにjQueryを使用しています

$('.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
    }
});​

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

Answer 2

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?