0

我有几个<input>元素需要使用类似 HTML5 的占位符。只有当输入没有文本时才会在焦点上消失并在模糊时重新出现。我已经看到了一些 javascript-heavy 的实现，并且我一直在寻找一个轻量级（最好是仅 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>
4

2 回答 2

1

我找不到任何完全符合我要求的东西（如“仅 css”），但我确实使用 jQuery 提出了几个很好的解决方案：

  1. 我将输入的背景设置为透明，将“占位符”文本的 z-index 设置为 -1。这使我可以单击“文本”并实际单击输入。看到这个 jsFiddle。

  2. 我允许“占位符”文本位于输入之上，但我使用文本上的单击处理程序将焦点转移到输入。看到这个 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让“占位符”文本很好地位于输入中，同时仍然允许输入自由移动。

于 2012-11-29T22:28:38.670 回答
1

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

如果您转到该页面并向下滚动到“Web 表单：输入占位符”，您会看到许多出色的项目，它们将完全满足您的需求。

于 2012-11-29T22:34:01.250 回答