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

作为插件单独使用

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

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Textarea.css">

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

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Placeholder.css">

普通文本域

普通文本域

最基本HTML：

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

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

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

resize拉伸-内联-独立

通过自定义的resize属性控制（方便兼容IE），默认文本域没有resize特性。

两个方向拉伸：

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

仅垂直方向拉伸：

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

仅水平方向拉伸：

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

Tips: 下面内容主要是为了方便IE浏览器下测试。

resize拉伸-内联-嵌套

<div class="ui-textarea"><textarea rows="4" resize="both"></textarea></div>

resize拉伸-块级-嵌套

<div class="ui-textarea"><textarea rows="4" resize="vertical" style="display:block;"></textarea></div>

resize拉伸-块级-独立

显隐控制 动态插入

<textarea class="ui-textarea" rows="4" resize="both" style="display:block;"></textarea>

如果引入了polyfill.js，则IE浏览器自动兼容resize特性。但不保证所有特殊场景都能覆盖。

只读和禁用

文本域只读：

文本域禁用：

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

文本域出错

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

嵌套结构出错：

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

带计数的文本域

这里演示静态效果，输入文本内容，输入框右下角的数值并不会变化，如果想要变化，需要引入Validate.js并对表单元素进行实例方法初始化。

<div class="ui-textarea-x" style="max-width:500px;">
    <textarea id="someId" 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>

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