javascript - 持久的 html 输入占位符

Question

有点奇怪......我想要的是我的输入占位符文本执行以下操作：

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

当用户输入文本而不是完全消失时。如果没有巨大的 javascript hack，这是否可能？

谢谢

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?