我有几个<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>
答案 0 :(得分: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
使'占位符'文本很好地放在输入内部,同时仍允许输入自由移动。
答案 1 :(得分:1)
Modernizer项目在这里有一个很好的跨浏览器HTML5 polyfill列表:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
如果您转到该页面并向下滚动到“Web窗体:输入占位符”,您将看到许多出色的项目,这些项目将完全符合您的要求。