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

所以，看起来没有办法纯粹通过CSS获得这种行为。

我想出了一个快速的jQuery插件，它将为我做。这是代码：http://jsfiddle.net/puTM3/

快点：

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

装入dom后，应注意90％的用例。

如果您动态编辑dom，那么任何新的/修改后的输入都需要重新.placeholder()。

任何人都有更好的想法吗？

持久的html输入占位符

2 个答案: