使非html5输入具有“占位符”

时间:2012-11-29 22:28:39

标签: javascript jquery html css

我有几个<input>元素,我需要有类似HTML5的占位符。仅当输入没有文本时,在焦点上消失并再次出现在模糊上的那种。我已经看到了一些javascript密集的实现,我一直在寻找一个轻量级(最好是仅css)解决方案。

这是HTML:

<div class="email-container">
    <span class="default-value">Email</span>
    <input class="text-input" name="login" type="email"/>
</div>
<div class="pw-container">
    <span class="default-value">Password</span>
    <input class="text-input" name="login" type="pw"/>
</div>

2 个答案:

答案 0 :(得分:1)

我找不到任何适合我账单的东西(如'css-only'),但我确实想出了一些使用jQuery的好解决方案:

  1. 我将输入的背景设置为transparent,将'placeholder'文本的z-index设置为-1。这允许我单击“打开”文本并实际单击输入。请参阅this jsFiddle

  2. 我允许'占位符'文本位于输入上但我在文本上使用单击处理程序将焦点转移到输入。请参阅this jsFiddle

  3. 在这两个实例中,实现的主力是这个jQuery代码:

    $('.text-input').each(function(){
        var input = $(this);
        //Initially hide the default value if the input is non-empty
        input.siblings('.default-value').toggle(!input.val());
        input.on("focus blur", function(){
            if(input.val().length === 0){
                input.siblings('.default-value').toggle();
            }
        }
    )});​
    

    这个难题的另一个重要部分是弄清楚如何使用position: absoluteposition: relative使'占位符'文本很好地放在输入内部,同时仍允许输入自由移动。

答案 1 :(得分:1)

Modernizer项目在这里有一个很好的跨浏览器HTML5 polyfill列表:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

如果您转到该页面并向下滚动到“Web窗体:输入占位符”,您将看到许多出色的项目,这些项目将完全符合您的要求。