LuLu UI pure版中文文档 »

Fork Me

静态控件之文本域

作为插件单独使用

如果只想以插件形式单独使用文本域的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>
如果是在使用Validate.js验证的form元素内,此label元素可缺省,直接下面代码结构:
<div class="ui-textarea-x" style="width:500px;">
    <textarea maxlength="250" rows="5"></textarea>
    <div class="ui-textarea"></div>
</div>
本页贡献者:

zhangxinxu