什么是placeholder

placeholder是html5中的表单占位符,支持text,password及textarea等html5中新增的表单元素。既然是html5,那么当然只有高级浏览器可以支持了,不过没关系我们可以借用jquery插件来帮我们来解决这个兼容问题

如何使用

使用方法很简单,先加载一个jquery库,然后就是加载这个插件的js,最后就是使用了,在页面调用如下js

js code

<script type="text/javascript">
$(function() {
$('input, textarea').placeholder();
});
</script>

表单demo

关于placeholder文字的颜色

火狐和webkit内核浏览器可以直接通过css来控制,分别为:-moz-placeholder::-webkit-input-placeholder,调用这个js之后,会给不支持placeholder的加上placeholder这个class,所以整合起来就是:

css code

:-moz-placeholder,
::-webkit-input-placeholder{
  color: #bfbfbf;
}
.placeholder{
	color: #bfbfbf;
}

注:请注意不要把这两个样式写在一起,如果集体声明ie8,9将不能正确解析.placeholder的样式。有点奇怪

更多资料

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持