文本输入
用于接受单行文本或多行文本。
规则
- 支持通过键盘或者剪切板输入文本。
- 通过光标可以在水平方向进行移动。
- 对特定格式的文本进行处理,eg:隐藏密码。
代码演示
文本输入
文本输入
标题文字
清空内容

校验出错
验证码
select
选择器组合
多行输入
0/300字
实例集合
与列表组件结合使用
<div class="list-ord">
<div class="list-item item-input">
<div class="item-input-title">标题文字</div>
<div class="item-input-content">
<input type="text" placeholder="请输入文字">
</div>
</div>
<div class="list-item item-input">
<div class="item-input-title">清空内容</div>
<div class="item-input-content">
<input type="text">
</div>
<div class="item-input-icon icon-cross"></div>
</div>
<div class="list-item item-input">
<div class="item-input-title"><img src="//image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" style="width:20;height:20px;"></div>
<div class="item-input-content">
<input type="text" placeholder="可放图片">
</div>
<div class="item-input-icon"></div>
</div>
<div class="list-item item-input has-warning">
<div class="item-input-title">校验出错</div>
<div class="item-input-content">
<input type="txt" value="校验出错">
</div>
<div class="item-input-icon icon-o-warning"></div>
</div>
<div class="list-item item-input">
<div class="item-input-title">验证码</div>
<div class="item-input-content">
<input type="txt" placeholder="输入验证码">
</div>
<button class="btn btn-secondary btn-sm">发送验证码</button>
</div>
<div class="list-item item-input">
<div class="item-input-title">select</div>
<div class="item-input-content item-select-wrapper">
<select>
<option value="" disabled selected>请选择</option>
<option value="saab">2017年</option>
<option value="opel">2018年</option>
<option value="audi">2019年</option>
</select>
</div>
</div>
<div class="list-item item-input">
<div class="item-input-title">选择器组合</div>
<div class="item-input-content item-select-group-wrapper">
<div class="select-group-item">
<select>
<option value="" disabled selected>请选择</option>
<option value="saab">2017年</option>
<option value="opel">2018年</option>
<option value="audi">2019年</option>
</select>
</div>
<div class="select-group-item">
<select>
<option value="" disabled selected>请选择</option>
<option value="saab">2017年</option>
<option value="opel">2018年</option>
<option value="audi">2019年</option>
</select>
</div>
</div>
</div>
</div>
<div class="textarea-wrapper">
<span class="textarea-limit">0/300字</span>
<textarea placeholder="分享你的就医经历,为他人提供宝贵参考"></textarea>
</div>