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

Fork Me

表单输入占位符

一、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演示

Fork Me 返回顶部