Javascript 持久化html输入占位符

有点奇怪。。。我希望我的输入占位符文本执行以下操作：

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

当用户输入文本而不是完全消失时。如果没有大规模的javascript攻击，这一切都是可能的吗

---

谢谢

如果您不打算对很多输入框执行此操作，使用背景图像（带有占位符文本）会有所帮助

 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
    }
});​

---

示例-

因此，看起来没有办法完全通过CSS获得此行为

我已经想出了一个快速的jQuery插件，可以帮我做到这一点。代码如下：

快速回答：

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

加载dom后，应该处理90%的用例

最糟糕的是，如果动态编辑dom，任何新的/修改的输入都需要重新

.placeholder（）

ed

---

有谁有更好的主意吗？

使用一个背景图像，它是两行占位符文本的图片：不透明和半透明。然后使用

background position

style移动背景，使半透明文本可见。e、 g.：

input{background image:url（“placeholder.jpg”）；}

和

input:focus{background position:20px；}

。现在这是一个想法。我没有考虑过。谢谢啊。有个问题。当输入模糊时，图像向左移，与输入的任何内容重叠。据我所知，没有办法用css测试输入的值（哦，如果输入[value=”“]真的能正常工作的话…），这个想法很好。如果条件允许，可以使用Javascript检查框中是否有文本。如果为true，请将图像保持在右侧。等等，我会为你写一段代码是的，如果我要使用javascript解决方案，有更灵活的方法。看看下面我的小提琴。