LuLu UI组件中文文档 » 表单输入占位符

一、placeholder占位符语法和演示

由于IE10+以及其他现代浏览器天然支持placeholder占位符效果，因此，Placeholder.js并不会对这些浏览器进行任何处理。

1. 语法

   实例方法：

   new Placeholder(el);

   其中el表示jQuery包装器元素，可缺省，如果缺省，则对页面上所有包含[placeholder]属性的元素进行占位符效果实现。

   包装器方法：

   $().placeholder();

   其中，这里的placeholder()还有刷新同步的作用，也就是对于IE7-IE9浏览器，如果你动态修改placeholder值，就可以使用此方法进行同步。

   $.fn.placeholder && $().placeholder();

   如果引入了Enhance.js，亦可以使用$().refresh()刷新占位符。

2. 原理和特点

   组件采用面向HTML的设计思想开发，直接使用原生的placeholder属性, IE10+浏览器天然支持placeholder属性，因此，交互效果全然使用CSS控制，IE7-IE9根据此属性，配合JS生成对应样式。

   有别于传统的占位符组件，这里借助label元素和form原生控件的关联特性，采用前置或后置覆盖在原始控件上，保证原生控件纯正的value值。

   注意，本组件不能脱离CSS使用(Placeholder.css)，否则，定位可能会有问题。

   支持默认隐藏且包含placeholder的输入框。

3. 测试

   IE7-IE9浏览器下查看下面的效果：

   点击显示隐藏的文本框

二、占位符样式和交互单独使用

placeholder占位符效果支持插件模式使用。CSS引入示意：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Input.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Textarea.css">
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Placeholder.css">

如果嫌弃上面CSS请求数量多，亦可以这样：

<link rel="stylesheet" href="//qidian.gtimg.com/c/=/lulu/theme/peak/css/common/ui/Input.css,/lulu/theme/peak/css/common/ui/Textarea.css,/lulu/theme/peak/css/common/ui/Placeholder.css">

引入下面JS（jquery地址略）：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Placeholder.js"></script>

然后就可以参考上面文档中的语法使用了。

单独使用Demo演示