Question

我有几个<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>

Answer 1

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

我将输入的背景设置为transparent，将'placeholder'文本的z-index设置为-1。这允许我单击“打开”文本并实际单击输入。请参阅this jsFiddle。
我允许'占位符'文本位于输入上但我在文本上使用单击处理程序将焦点转移到输入。请参阅this jsFiddle。

在这两个实例中，实现的主力是这个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: absolute和position: relative使'占位符'文本很好地放在输入内部，同时仍允许输入自由移动。

Answer 2

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

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

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

2 个答案: