Question

我在我的应用程序中使用占位符作为输入框，而对于不支持占位符的浏览器使用jquery解决方法。但是在大多数浏览器中，即使输入处于空白状态，占位符也会消失。一种解决方法是在输入字段上使用透明bg并将带有文本的span放在输入字段后面，并在输入内容后将bg更改为opaque。问题是我的应用程序现在有超过3000个输入字段。这可以通过运行时的jquery插件来实现吗？或者我愿意接受更好的建议。请帮忙。

Answer 1

您在同一页面上有3000个输入字段吗？在这种情况下，您需要以某种方式重新设计您的应用程序。

如果你在许多页面上有不同的输入，并希望插件在需要时自动生成占位符，那么有很多很好的插件可供选择。这是polyfills的综合列表 - 只需查找“Web窗体：输入占位符”标题。 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

大多数都不需要为每个实例专门调用，所以你应该避免修改3000行代码。：）

Answer 2

我会使用值attr，而逻辑将如下所示。

var input = document.createElement('input');
if(! ('placeholder' in input))
{
    $("input[placeholder]").focus(/* clear value if it is equals placeholder */);
    $("input[placeholder]").blur(/* assign placeholder if it is "" */);
    $("input[placeholder]").each(/* assign placeholder if value equals "" */)
}

您还可以更改焦点和模糊输入的样式（或类），使其看起来更像占位符。

Answer 3

这是我写的和正在使用的：

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body{
    background-color:#DDD;
}

span.placeholder
{
    background-color:#FFF;
    color:#777;
    border-radius: 4px 4px 4px 4px;
    margin: 5px 0;
    padding: 9px 0 8px 13px;
    width: 297px;

}
input
{
    border: 1px solid #707A68;
    border-radius: 4px 4px 4px 4px;
    margin: 5px 0;
    padding: 10px;
    width: 310px;
    background:transparent;
}

</style>

<body>
<div>
    <input type="text" placeholder="hello" name="hh"/>
</div>
</body>

<script>
$('input').each(function(){

    var txt = $(this).attr('placeholder');
    var name = $(this).attr('name');
    var node = $("<span class='placeholder'>"+txt+"</span>").appendTo($(this).parent());
    $(this).before(node);
    node.css('position','absolute');
    node.css('z-index','-1');
    node.css('display','block');
    $(this).attr('placeholder','');
});
$('input').bind('keyup',function(){
    if($(this).val()=="")
        $(this).css('background','transparent');
    else
        $(this).css('background','#FFF');
});
</script>

HTML永久占位符解决方法

3 个答案: