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. 带计数的文本域

    <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. 计数文本域的拓展功能

    /* 参数什么的纯示意 */
    .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对占位符样式进行设置。

Fork Me 返回顶部