• 组件
  • 布局与其它

文本输入

用于接受单行文本或多行文本。

规则

  • 支持通过键盘或者剪切板输入文本。
  • 通过光标可以在水平方向进行移动。
  • 对特定格式的文本进行处理,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>