HTML永久占位符解决方法 [英] HTML permanent Placeholder workaround
问题描述
我在我的应用程序中使用占位符作为输入框，而对于不支持占位符的浏览器使用jquery解决方法。但是，在大多数浏览器中，即使输入处于空白状态，占位符也会消失。一种解决方法是在输入字段上使用透明bg并将带有文本的span放在输入字段后面，并在输入内容后将bg更改为opaque。问题是我的应用程序现在有超过3000个输入字段。这可以通过运行时的jquery插件来实现吗？或者我愿意接受更好的建议。请帮忙。
I am using placeholders for input boxes in my application and a jquery workaround for browsers that do not support placeholders. However in most browsers the placeholder disappears when the input is in focus even though it is empty. One workaround is to use a transparent bg on the input field and put a span with the text directly behind the input field and change the bg to opaque once something has been typed in. The problem is that my application now has over 3000 input fields. Is this possible to do this via a jquery plugin in run time? or I am open to a better suggestion. Please help.
推荐答案
这是我写的和使用的：
<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永久占位符解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
