LuLu UI组件中文文档 » 静态控件之文本域

一、普通文本域

1. 普通文本域

   最基本HTML：

   <textarea class="ui-textarea"></textarea>

   textarea内置-块状-100%父级宽度：

   <div class="ui-textarea"><textarea rows="8"></textarea></div>

2. 只读和禁用

   文本域只读：

   文本域禁用：

   <textarea class="ui-textarea" readonly></textarea>
   <textarea class="ui-textarea" disabled></textarea>

3. 文本域出错

   非嵌套结构出错：

   <textarea class="ui-textarea error"></textarea>

   嵌套结构出错：

   <div class="ui-textarea"><textarea class="error"></textarea></div>

二、带计数的文本域

1. 带计数的文本域

   0/250

   <div class="ui-textarea-x" style="width:500px;">
       <textarea id="forFocusable" maxlength="250" rows="5"></textarea>
       <div class="ui-textarea"></div>
       <-- 点击任意区域文本域都能focus，可缺省 -->
       <label for="forFocusable" class="ui-textarea-count">
           <span>0</span>/<span>250</span>
       </label>
   </div>

   如果是在使用Validate.js验证的form元素内，此label元素可缺省，直接下面代码结构：

   <div class="ui-textarea-x" style="width:500px;">
       <textarea maxlength="250" rows="5"></textarea>
       <div class="ui-textarea"></div>
   </div>

2. 计数文本域的拓展功能

   3215648852 x 1/10

   /* 参数什么的纯示意 */
   .my_custom_li {
       float: left;
       background-color: #E7F7FC;
       padding: 5px 10px;
       margin: 5px 2px 0 3px;
       position: relative;
       z-index: 1;
   }
   .ui-textarea-x > input.textarea {
       display: inline-block;
       width: 110px;
       padding: 5px 0;
       margin-top: 5px;
       overflow: hidden;
   }

   <div class="ui-textarea-x" style="width:500px; min-height:100px;">
       <-- QQ号码项示意 -->
       <a href="javascript:" class="my_custom_li">3215648852 x</a>
       <-- 后面的输入框 -->
       <input id="forFocus2" class="textarea">
       <-- 边框元素，注意使用label元素并使for值等于input的id -->
       <label class="ui-textarea" for="forFocus2"></label>
       <-- 计数效果 -->
       <label for="forFocus2" class="ui-textarea-count">
           <span>1</span>/<span>10</span>
       </label>
   </div>

三、单独使用文本域样式

如果只想以插件形式单独使用文本域的UI，而不是所有UI组件集合commom/ui.css，也是支持的，直接引入：

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

然后就可以参照上述文档使用了。

单独使用Demo演示

文本域如果有使用placeholder属性，可以引入Placeholder.css对占位符样式进行设置。