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

作为插件单独使用

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

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

然后就可以参照下面的文档使用了。

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

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

普通文本框

基本态

/* type='text'可缺省 */
<input class="ui-input">

input内置-内联标签：

<span class="ui-input"><input></span>

<div class="ui-input"><input></div>

只读和禁用

文本框只读：

文本框禁用：

<input class="ui-input" value="只读" readonly>
<input class="ui-input" value="禁用" disabled>

出错

文本框出错：

<input class="ui-input error" required>
<span class="ui-input"><input class="error" required></span>

Tips: 实际开发.error类名会由ErrorTip.js自动添加，通常无需手动添加。

带计数的文本框

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

带计数的文本框

<div class="ui-input-x">
    <input id="someId" maxlength="20" placeholder="占位符">
    <div class="ui-input"></div>
    <label for="someId" class="ui-input-count">
        <output>0</output>/<span>20</span>
    </label>
</div>

someId这个id注意不要重复，这里只是演示<input>元素的id和<label>需要保持一致，大家拷贝代码的时候注意修改去重。

如果希望.ui-input-x这个<div>元素不是100%自适应外部容器，可以指定width大小。

<div class="ui-input-x">
    <input maxlength="20">
    <div class="ui-input"></div>
</div>

其它状态

禁用状态：

<div class="ui-input-x">
    <input maxlength="20" disabled>
    <div class="ui-input"></div>
</div>

普通搜索框

搜索：

/* type='search'必须，类名'ui-input-search'可缺省 */
<input type="search" class="ui-input">

除了type属性值不一样，其他使用和普通文本框一样。

带搜索图标的搜索框

内联： 搜索

<span class="ui-input ui-input-search">
    <input type="search">
    <a href="javascript:" class="ui-icon-search">搜索</a>
</span>

内联, 图标右侧： 搜索

<span class="ui-input ui-input-search" align="right">
    <input type="search" placeholder="测试">
    <button class="ui-icon-search">搜索</button>
</span>

如果是直接表单提交跳转式的搜索，使用label标签可访问性和易用性最好，直接for属性值关联submit类型按钮的id即可！

<div class="ui-input ui-input-search" align="right" style="width:268px;">
    <input type="search" placeholder="测试">
    <a href="javascript:" class="ui-icon-search" role="button">搜索</a>
</div>

<div class="ui-input ui-input-search">
    <input type="search" disabled>
    <button class="ui-icon-search" disabled>搜索</button>
</div>

<div class="ui-input ui-input-search">
    <input type="search" class="error">
    <button class="ui-icon-search">搜索</button>
</div>

<span class="ui-input ui-input-search" align="right">
    <input type="search" placeholder="测试">
    <input type="submit" class="ui-icon-search" value="搜索">
</span>

<span class="ui-input ui-input-search" align="right">
    <input type="search" class="error">
    <input type="submit" class="ui-icon-search" value="搜索">
</span>